UseEffect：无法读取属性

Question

我试图从 mongodb 获取数据并显示在 table 上。我正在使用 useEffect 来调用 get 函数。但有时会弹出一个错误，它说无法读取“details.user._id”，但有时，它可以显示数据。任何人都可以帮忙吗？还是有一种干净的方法来做到这一点？非常感谢任何提示和帮助！

我的使用效果：

useEffect(() => {
    getProfile();
    getUser();
}, [getUser(), getProfile()])

下面是我想要获取的数据 && getProfile returns this:

下面正在渲染 table:

  const render_userProfile = (details, index) => {
    return (
        <tr key={index}>
            <td>{details.user._id}</td>
            <td>{details.user.fullName}</td>
            <td>{details.user.email}</td>
            <td>{details.icNumber}</td>
            <td>{details.phoneNumber}</td>
            <td>{details.dob}</td>
            <td>{details.gender}</td>
            <td>{details.address1 + " " + details.address2 + " " + details.city + " " + details.state + " " + details.zip}</td>

            <td>{details.date}</td>

        </tr>
    )
}

Answer 1

这是因为在初始渲染中，当 React 开始渲染时，details 状态是空的，它没有 _id 属性或任何属性，因此它抛出错误。 useEffect 在初始渲染后运行。所以你的数据来晚了。所以使用条件渲染。

const render_userProfile = (details, index) => {
    return (
        <tr key={index}>
          <tr key={index}>
          {
            Object.keys(details).length ? 
            <React.Fragment>
          
              <td>{details.user._id}</td>
              <td>{details.user.fullName}</td>
              <td>{details.user.email}</td>
              <td>{details.icNumber}</td>
              <td>{details.phoneNumber}</td>
              <td>{details.dob}</td>
              <td>{details.gender}</td>
              <td>{details.address1 + " " + details.address2 + " " + details.city + " " + details.state + " " + details.zip}</td>
              <td>{details.date}</td>
            </React.Fragment>
            :
            <td>Loading...</td>
          }
        </tr>
    )
}

这里的数据只有在 details 中有一些对象时才会呈现，否则它会呈现 loading...

UseEffect：无法读取属性

UseEfffect: cannot read property

reactjs

mern

use-effect

UseEffect：无法读取 属性

UseEfffect: cannot read property

reactjs

mern

use-effect

UseEffect：无法读取属性