时间戳

首页 > 解决方案 > UseEffect：无法读取属性

reactjs - UseEffect：无法读取属性

问题描述

我试图从 mongodb 获取数据并显示在表格上。我正在使用 useEffect 来调用 get 函数。但有时会弹出一个错误，它说 can't read " 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>
    )
}

标签： reactjsuse-effectmern

解决方案

发生这种情况是因为在 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...

推荐阅读