Jestem nowy w Reactjs, obecnie pracuję nad tabelą antdesign Chcę pobrać dane z zewnętrznego API i wstawić dane do tabeli ale to daje mi błąd Też go wygooglowałem ale nic nie znalazłem Pomóż mi poniżej jest mój kod

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";

function App() {
  const [state, setstate] = useState({});
  const [loading, setloading] = useState(true);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    const res = await Axios.get(
      "https://jsonplaceholder.typicode.com/comments"
    );

    setstate(res.data);
    setloading(false);
  };
  const data = loading
    ? "wait"
    : state.map(row => ({ Name: row.name, Email: row.email }));

  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      width: 150
    },
    {
      title: "Email",
      dataIndex: "Email",
      width: 150
    }
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={data}
        pagination={{ pageSize: 50 }}
        scroll={{ y: 240 }}
      />
      ,
    </div>
  );
}

export default App;

A oto codeandbox.io

1
Hanzlah Tariq 25 marzec 2020, 11:08

2 odpowiedzi

Najlepsza odpowiedź

Właściwość danych komponentów <Table /> może być tablicą podobną do struktury danych, gdy wysyłasz jej ciąg, kiedy przypisujesz "wait" do data właściwości i możesz otrzymać błąd z tego powodu, zamiast tego możesz użyć coś jak poniżej:

const data = loading
    ? [] 
    : state.map(row => ({ Name: row.name, Email: row.email }));

W którym przypisujemy pustą tablicę do danych, gdy są w stanie ładowania, również powinieneś przechowywać dane API w swoim stanie, a nie jako zmienną wewnątrz funkcji, to, co robisz, jest oczywistą złą praktyką !

1
a_m_dev 25 marzec 2020, 08:31

Oprócz zaakceptowanej odpowiedzi, zwróć uwagę w poniższym fragmencie na warunkowe renderowanie również, jak korzystać z funkcji state, setState. Proponuję sprawdzić dokumentacja na temat korzystania z punktów reagowania:

Oto lepsza implementacja twojego kodu:

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Table } from "antd";

function App() {
  const [state, setstate] = useState([]);
  const [loading, setloading] = useState(true);
  useEffect(() => {
    getData();
  }, []);

  const getData = async () => {
    await Axios.get("https://jsonplaceholder.typicode.com/comments").then(
      res => {
        setloading(false);
        setstate(
          res.data.map(row => ({
            Name: row.name,
            Email: row.email,
            id: row.id
          }))
        );
      }
    );
  };

  const columns = [
    {
      title: "Name",
      dataIndex: "Name",
      width: 150
    },
    {
      title: "Email",
      dataIndex: "Email",
      width: 150
    }
  ];

  return (
    <div>
      {loading ? (
        "Loading"
      ) : (
        <Table
          columns={columns}
          dataSource={state}
          pagination={{ pageSize: 50 }}
          scroll={{ y: 240 }}
        />
      )}
    </div>
  );
}

export default App;

kody i skrzynka

2
ROOT 25 marzec 2020, 08:41