Question

这指向地图函数并说show: boolean= false ; show1:any = false ; show2: boolean = false ; // making show; show1; show2 initially to false hides it. when you click the DETAILS // button the click event shows it. and convert all *ngIf = show // (i.e., remove "!" from all *ngIf's)。

错误=> can't read property map of undefined

代码

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

Answer 1

删除地图声明中的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 2

表是一个函数，没有键值对。因此，使用点概念将返回undefined。您正在data内设置api调用，这就是您想要映射的内容。您可以这样说：data.map而不是Table.data.map

Answer 3

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

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/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>

 )

}

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

React Hooks-Map函数返回未定义

3 个答案: