Передайте JSON данные, возвращенные из fetch (), в .map внутри const - PullRequest
Новая
       22

Передайте JSON данные, возвращенные из fetch (), в .map внутри const

0 голосов
/ 14 апреля 2020

Сейчас мой код извлекает 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;

Ответы [ 2 ]

0 голосов
/ 14 апреля 2020

Вы можете попробовать поместить fetch () в обещание и вызвать .map, когда обещание разрешится, или альтернативно назначить данные const в том же методе извлечения.

0 голосов
/ 14 апреля 2020

Вы не должны делать async(side-effect) вызов в render (здесь функциональный компонент). Для этого используйте 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;
...