无法在 Reactjs 中呈现数据

Question

我是 React 的新手，从昨天开始就一直在调试它，我最终决定 post 因为我对发生的事情一无所知。

以下反应代码从 api 获取数据，然后在 UI 上呈现它。但是，这里几乎没有发生奇怪的事情。

最初我收到错误提示 TypeError: Cannot read property 'map' of undefined 但是当我注释掉 {renderTableData(data)} 并保存然后再次取消注释并保存时，the data is rendering perfectly on the UI

我在想，甚至在从 API 获取数据之前，它就会被传递给函数 renderTableData，这就是为什么在控制台中打印 undefined 的原因。

这是代码

export default function TenantList(){
  const [data, setData] = useState([]);
    useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/users').then((response)=>{
        return response.json();
      }).then((data)=>{
        setData(data)
      })
    },[]);
 
function renderTableData(data) {
  console.log("hello ", data)
  return data.map((student, index) => {
      const { name, email } = student //destructuring
      return (
          <tr key={name}>
              <td>{name}</td>
              <td>{email}</td>
          </tr>
      )
  })
}
  return (
    <>
      <div>
        {renderTableData(data)}
      </div>
    </>
  )
}

请提出解决方法

Answer 1

如果你有数据，你只想运行这个函数，所以检查它：

{data && renderTableData(data)}

无法在 Reactjs 中呈现数据

Unable to render data in Reactjs

reactjs

fetch-api

react-hooks