0

现在我的代码正在从文件中提取它的 JSON，我试图让它从 API 中提取数据，我已经成功地将数组从 API 打印到控制台，但是当我尝试使用 .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;
4

2 回答 2

0

你不应该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;
于 2020-04-14T18:54:25.947 回答
-1

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

于 2020-04-14T19:01:01.553 回答