таблица реакции не показывает данные

Question

Я новичок в React и JS. Пробуем использовать таблицу реакций и отправляем данные из класса в функцию. Данные, поступающие от props, отображаются в консоли, но не отображаются в таблице реакции. Ниже приведен код и результат console.log. Расскажите, пожалуйста, о моей ошибке и о том, какой топи c я должен покрыть, чтобы улучшить.

Примечание: если заменить эту строку:

const result = props.state;

на:

const result = props.state.data;

показать ошибка data is undefined.

function Showdata(props){
    // Result of below console.log is in attached image.
    console.log(props.state.data);
    const columns = useMemo(
        () => [
                {
                    Header: 'Column 1',
                    accessor: 'props.state.data.id', // accessor is the "key" in the data
                },
                {
                    Header: 'Column 2',
                    accessor: 'props.state.data.TeamName',
                },
            ],
        []
    );

    const [data, setData] = useState([]);

    useEffect(() => {
        (async () => {
            /*If replace below line with const result = props.state.data; show error "data is undefined".*/
            const result = props.state;
            setData(result.data);
            console.log(result.data);
        })();
    }, []);

    return (
        <div className="App">
            <Table columns={columns} data={data} />
        </div>
    );


const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable({ columns, data });

    return (
        <div>
            <p>Data of {props.state.category}</p>
  <table {...getTableProps()}>
    <thead>
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map(row => {
        prepareRow(row)
        return (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => {
              return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            })}
          </tr>
        )
      })}
    </tbody>
        </table>
    </div>
  )
}

Answer 1

Я вижу ошибку в вашем columns:

const columns = useMemo(
  () => [
    ...
      accessor: 'props.state.data.id',
    ...
      accessor: 'props.state.data.TeamName',
    ...
);

Не может быть accessor как props.state.data.id. В вашей консоли я вижу массив объектов данных, например:

[{ id: ..., TeamNameL ... }]

И вы должны указать эти поля, например:

const columns = useMemo(
  () => [
    ...
      accessor: 'id',
    ...
      accessor: 'TeamName',
    ...
);

Также вы можете увидеть официальный пример .