Как использовать данные вне useEffect?

В переменной const user внутри функции useEffect я получаю объект пользователя, я хочу использовать идентификатор, имя и фамилию из объекта пользователя в текстовом поле. Возможно ли каким-то образом использовать объект пользователя вне функции useEffect?

В приведенном ниже коде пользовательский объект не определен при использовании вне useEffect.

  • Любая помощь приветствуется!
import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useLocation } from "react-router-dom";

interface userData {
    id: number;
    firstname: string;
    lastname: string;
};

const [obj, setObj] = useState();
const location = useLocation<userData>();
useEffect(() => {
    const user = allUsers.filter((obj) => obj.id === location.state.id);
    // handling if user is undefined
    if(user) {
        console.log('Storing object data')
        setObj(user);
    } else {
        console.log('No data!');
    }
}, [location]);

return (
        <div>
            <h1>User Data</h1>
            {/*Text field - id*/}
            <TextField
               name="id"
               id="id"
               label="ID"
               value={obj.id}
               fullWidth
             />
             {/*Text field - firstname*/}
             <TextField
               name="firstname"
               id="firstname"
               label="First Name"
               value={obj.firstname}
               fullWidth
             />
             {/*Text field - lastname*/}
             <TextField
               name="lastname"
               id="lastname"
               label="Last Name"
               value={obj.lastname}
               fullWidth
             />
        </div>
    );

reactjs typescript react-hooks tsx
person lo7    schedule 31.03.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

В вашем коде .filter() возвращает множество. Возможно, вы захотите использовать .find() вместо. Также в любом случае я бы обновил setObj() ваше состояние, потому что вы можете обрабатывать null в return также с obj && obj.id.

Попробуйте следующее:

useEffect(() => {
    const user = allUsers.find((obj) => obj.id === location.state.id);
    setObj(user);
}, [location]);

Тогда в вашем return:

return <div>
   <h1>User Data</h1>
   {/* Showing TextField only if obj is not null */}
   { obj && <TextField name="id"
                       id="id"
                       label="ID"
                       value={obj.id}
                       fullWidth />}
</div>

Надеюсь, это проясняет!

person norbitrial    schedule 31.03.2020
comment
Привет, надеюсь, вы в порядке, не могли бы вы взглянуть на этот вопрос. был бы очень признателен за помощь. stackoverflow.com/questions/65759907/ - person kd12345; 17.01.2021