如何使用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() 返回一个数组。可能您想改用.find()。同样在任何一种情况下，我都会使用setObj() 更新您的状态，因为您也可以使用obj && obj.id 处理return 中的null。

尝试以下方法：

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>

我希望这可以澄清！