使用服务器返回的数据呈现 HTML 元素列表

Question

我有一个由服务器返回的对象数组，我必须在表格中显示这些对象。我尝试使用 array.map() 方法将对象作为行元素映射到另一个数组中，然后在 JSX 中显示该数组，如 <tbody>{listItems}</tbody>

const TeacherTable = () => {
  let listItems
  async function getTeacherData() {
    const response = await fetch('http://localhost:1234/api/teacher')
    const res = await response.json()
    console.log(res.data)
    listItems = await res.data.map(record => (
      <tr>
        <td>{record.teacherID}</td>
        <td>{record.teacherName}</td>
        <td>{record.teacherEmail}</td>
      </tr>
    ))
  }
  useEffect(() => {
    getTeacherData()
  })
  return <tbody>{listItems}</tbody>;
};

我不知道我做错了什么，但我似乎没有工作。我试图 console.log() 数据数组来检查数据是否被传递到前端并且它没有任何错误地通过但仍然没有呈现列表。

如何呈现数组中的行元素列表？

感谢您阅读本文。希望您有一个美好的白天/夜晚。

Answer 1

你应该做几件事：

1. listItems 需要是一个状态变量，这意味着它会在组件更新时导致重新渲染，因为现在当 listItems 设置在 getTeacherData 内部时，组件不会重新渲染。我已经在下面的更新代码中将它实现为状态（现在称为items）。如果您想了解更多关于状态以及它如何导致更新的信息，您应该查看this out
2. 您应该将一个空数组作为依赖项传递给useEffect。关于原因的简短解释是因为您只想调用一次 useEffect，要获得更全面的解释，您应该阅读 this。
3. 有点构建 (1)，可以说让状态只包含数据而不包含组件逻辑是一种更好的做法。在此示例中，您会看到我没有将获取的数据映射为 jsx，而是将其内容存储并映射到组件的返回部分中。

import {useState, useEffect} from "react";

const TeacherTable = () => {
  const [items, setItems] = useState([]);
  
   useEffect(() => {
      async function getTeacherData() {
            const response = await fetch('http://localhost:1234/api/teacher')
            const res = await response.json()
            console.log(res.data)
            setItems(res.data);
        }

        getTeacherData();
    }, []);
  
  return <tbody>{items.map(record => (
      <tr>
        <td>{record.teacherID}</td>
        <td>{record.teacherName}</td>
        <td>{record.teacherEmail}</td>
      </tr>
    ))}</tbody>;
};