UseEffect：无法读取属性

Question

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

我的使用效果：

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

下面是我想要获取的数据 && getProfile 返回这个：

下面是一个表格：

  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>
    )
}

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