如何使用useEffect之外的数据？

Question

在 useEffect 函数内的变量 const user 中，我得到一个用户对象，我想在文本字段中使用用户对象的 ID、名字和姓氏.是否可以在 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() returns an array. Probably you want to use .find()。同样在任何一种情况下，我都会用 setObj() 更新你的状态，因为你可以在 return 中处理 null 也可以用 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>

我希望这能澄清！

如何使用useEffect之外的数据？

How to use data outside useEffect?

typescript

reactjs

tsx

react-hooks