React Hooks - функция карты возвращает неопределенный

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

Таблица является функцией и не имеет пар ключ-значение. Таким образом, использование понятия точка вернет неопределенное. Вы устанавливаете свой вызов API внутри data, это то, что вы хотите отобразить. Вы можете получить к нему доступ, сказав: data.map вместо Table.data.map

Answer 2

Ваша карта должна принять состояние данных, которое вы установили, а затем отобразить массив оттуда.Затем вам нужно создать псевдоним вашей карты.Вы можете увидеть примеры здесь:

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>

 )

}

Это только пример.Но вы видите, что этот путь должен помочь.

Answer 3

Удалить 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>
    )
  })
 }