React钩子 - 地图功能返回未定义

Question

这指向地图功能，并说它can't read property map of undefined。

错误=> return Table.data.map((user) => {

代码

import React, { useEffect, useState } from 'react';
const Table = () => {
 const [data, setData] = useState([]);
 useEffect(() => {
 setData([...data, getFakeApiData()]);
 }, [data]);

const renderTable = () => {
  return Table.data.map((user) => {
    const { name, email, address, company } = user;
    return (
      <tr key={name}>
          <td>{name}</td>
          <td>{email}</td>
          <td>{address.city}</td>
          <td>{company.name}</td>
      </tr>
    )
  })
 }
};

Answer 1

您的地图需要采用您设置的数据状态，然后从那里映射数组。然后，您需要别名。您可以在此处看到示例：

https://developer.mozilla.org/en-us/docs/web/javascript/Reference/global_objects/array/map/map

您的地图功能希望看起来更像：

{data.map(a => (
      <tr key={a.name}>
          <td>{a.name}</td>
          <td>{a.email}</td>
          <td>{a.address.city}</td>
          <td>{a.company.name}</td>
      </tr>
))}

您需要确保您正在使用参考(在这种情况下为" A"(。

然后，您可以将其安全放置在表中。例如：

export const Table = () => {
const [data, setData] = useState([]);
 useEffect(() => {
 setData([...data, getFakeApiData()]);
 }, [data]);
 return (
     <div>
       <table>
            <thead>
               <tr>
                 <th>Name</th>
                 <th>Email</th>
                 <th>Company Name</th>
                 <th>Address</th>
               </tr>
            </thead>
            <tbody>
               {data.map(a => (
                  <tr key={a.name}>
                      <td>{a.name}</td>
                      <td>{a.email}</td>
                      <td>{a.address.city}</td>
                      <td>{a.company.name}</td>
                  </tr>
                ))}
            </tbody>
       </table>
     </div>
 )
}

这只是一个示例。但是您可以看到这种方式应该有所帮助。

Answer 2

在地图语句上删除 Table，例如 return data.map((user) => {

const renderTable = () => {
  return data.map((user) => {
    const { name, email, address, company } = user;
    return (
      <tr key={name}>
          <td>{name}</td>
          <td>{email}</td>
          <td>{address.city}</td>
          <td>{company.name}</td>
      </tr>
    )
  })
 }

Answer 3

表是一个函数，没有键值对。因此，使用点概念将返回未定义。您将在data的内部设置API调用，这是您要绘制的。您可以通过说：data.map而不是Table.data.map