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

Question

В переменной 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>
    );

Answer 1

В вашем коде .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>

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