React：如何遍历对象？

Question

patient.users returns

patients.users 它是一个对象数组，但我无法遍历它。当我尝试调用 patients.users[0] 时，它返回“TypeError：无法读取未定义的属性（读取‘0’）”。这是为什么？

function DoctorPanel() {
const location = useLocation();
const { id } = location.state;
const [patients, setPatiens] = useState('');

useEffect(() => {
  getPatients();
}, [])

const getPatients = () => {
  api.getDoctorById(id).then(response => {
    setPatiens(response.data)
})

 }

console.log(patients.users)



return (

<div>
    <div className="container">
      <h2 className="text-center">List of Patients</h2>
      <table className="table table-bordered table-striped">
          <thead>
              <th>Employee First Name</th>
              <th>Employee Last Name</th>
              <th>Number</th>
          </thead>
          <tbody>
            {
              patients.users.map(patient => 
                      <tr>
                          <td>{patient.firstName}</td>
                           <td>{patient.secondName}</td>
                           <td>{patient.number}</td>
                      </tr>
               )
            }
          </tbody>
      </table>    
  </div>
</div>

) }

for 循环、forEach 和 with Object.keys 也不起作用。我如何遍历它并显示详细信息？

Answer 1

问题是因为当你第一次渲染这个组件时 patients.users 数组中没有任何东西，所以它说无法读取你的数组的未定义的属性。

然后您在 useEffect 中获取数据，这是在第一次渲染后运行。

您需要做的是在您访问的任何地方 patients.users 更改为：

patient?.users 或 patient && patient.users，这包括您的 console.log。这样做是在尝试访问 users 之前检查 patient 数组是否未定义。

编辑：

在 useEffect 中，将代码放入其中而不是调用存在于外部的函数也是最佳做法。你在状态 setter setPatiens 中有一个错字应该是 setPatients.

React：如何遍历对象？

React: How to loop through object?

arrays

frontend

loops

object

reactjs