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()更新您的状态，因为您也可以使用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>

我希望这可以澄清！

如何在useEffect之外使用数据？

1 个答案: