反应 fetch-api 和反应表答案

【问题标题】：React fetch-api and react table反应 fetch-api 和反应表
【发布时间】：2022-08-18 04:47:35
【问题描述】：

我正在尝试获取数据并将其呈现到反应表上。我不知道为什么它不起作用。有人可以帮我吗？我将数据输入到网络响应中，但我不知道为什么它没有呈现给网站。这是我的代码：

import React, { useState, useEffect } from \"react\";
import \'react-table/react-table.css\';
import ReactTable from \'react-table\';

export default function Traininglist() {
    const [trainings, setTrainings] = useState([]);

    useEffect(() => fetchData(), []);

    const fetchData = () => {
        fetch(\"https://customerrest.herokuapp.com/api/trainings\")
            .then(response => response.json())
            .then(data => setTrainings(data.content))
            .catch(err => console.error(err))
    };

    const columns = [
        {
            title: \'Date\',
            field: \'date\',
        },
        {
            title: \'Duration (min)\',
            field: \'duration\'
        },
        {
            title: \'Activity\',
            field: \'activity\'
        },
     ];

    return (
      <div>
         <h1>Trainings</h1>
         <ReactTable filterable={true} data={trainings} columns={columns} />
      </div>
    );

在这里你可以看到数据的样子：

标签： reactjs fetch-api react-table

【解决方案1】：

您可能需要通读文档。您的列至少应该有一个名为accessor 的键，它以您的数据集的一个键为目标，它将从中呈现一个值。看起来您在这里有嵌套数据，因此您可能需要使用 Cell 字段来呈现您需要的内容。

【讨论】：