将 fetch() 返回的 JSON 数据传递给 const 中的 .map

Question

现在我的代码正在从文件中提取它的 JSON，我试图让它从 API 中提取数据，我已经成功地从 [=19] 中打印了数组=] 到控制台，但是当我尝试对我提取的数据使用 .map 函数时，我收到一条错误消息，指出保存我的数组的变量未被识别。

将数组打印到控制台的工作代码：

import React from 'react';
import { MDBDataTable } from 'mdbreact';
import API_Data from '../myJSON_Data.json';

const DatatablePage = () => {

    fetch('https://api')
        .then((response) => {
            return response.json();
    })
    .then((data) => {
        console.log(data);
    });

  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      }
    ],
    rows: API_Data.map(API_Data => {
      return {
        state: API_Data.name
      }
    })
  };

  return (
    <div>
        <div>
            <div>
                <div>            
                <h1>Data from API</h1>
                <MDBDataTable
                    striped
                    bordered
                    hover
                    data={data}
                />
                </div>                            
            </div>
        </div>
    </div>
  );  
}

export default DatatablePage;

我尝试过的：

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DatatablePage = () => {
    var apiData;
    fetch('https://api')
        .then((response) => {
            return response.json();
    })
    .then((data) => {
        console.log(data);
        apiData = data;
    });

  const data = {
    columns: [
      {
        label: 'Name',
        field: 'name',
        sort: 'asc',
        width: 150
      }
    ],
    rows: apiData.map(apiData => {
      return {
        state: apiData.name
      }
    })
  };

  return (
    <div>
        <div>
            <div>
                <div>            
                <h1>Data from API</h1>
                <MDBDataTable
                    striped
                    bordered
                    hover
                    data={data}
                />
                </div>                            
            </div>
        </div>
    </div>
  );  
}

export default DatatablePage;

Answer 1

您不应该 async(side-effect) 调用渲染（此处为功能组件）。为此使用 useEffect 并使用 useState 设置状态。阅读更多关于钩子的内容。

这里是示例，您可以根据需要阅读和修改。 https://reactjs.org/docs/hooks-intro.html

import React, { useEffect } from "react";
import { MDBDataTable } from "mdbreact";

const DatatablePage = () => {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch("https://api")
      .then((response) => {
        return response.json();
      })
      .then((res) => {
        const data = {
          columns: [
            {
              label: "Name",
              field: "name",
              sort: "asc",
              width: 150,
            },
          ],
          rows: res.map((apiData) => ({state: apiData.name})),
        };
        setData(data);
      });
  }, []);
  return (
    <div>
      <div>
        <div>
          <div>
            <h1>Data from API</h1>
            <MDBDataTable striped bordered hover data={data} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default DatatablePage;

Answer 2

您可以尝试将 fetch() 放入 promise 中，并在 promise 解析时调用 .map，或者在同一个 fetch 方法中分配一个 const 数据。

将 fetch() 返回的 JSON 数据传递给 const 中的 .map

Pass JSON data returned from fetch() to .map inside a const

javascript

json

reactjs

mdbreact