將 JSON 數據加載到 Table React

Question

我正在嘗試使用我制作的 REST API，並使用 React 將返回的數據轉儲到一個簡單的表中。

我知道我可以點擊我的 API 並使用以下行獲取 JSON 數據：

 fetch('http://localhost:5000/api/v0.1/Organisations').then(r=>r.json());

如果我添加一個.then(d=>console.log(d)); 我得到了日志中顯示的數據，所以我知道我的 API 已成功返回數據：

但是，當我啟動應用程序時，我在組件的getKeys函數上遇到了Cannot convert undefined or null to object問題。

我假設，這是因為fetch返回的承諾尚未實現，但我不知道如何等待。

我的組件定義：

export default class Table extends React.Component
{

    constructor(props){
        super(props);
        this.getHeader = this.getHeader.bind(this);
        this.getRowsData = this.getRowsData.bind(this);
        this.getKeys = this.getKeys.bind(this);
    }

    getKeys = function(){
        return Object.keys(this.props.data[0]);
    }

    getHeader = function(){
        var keys = this.getKeys();
        return keys.map((k,i)=>{
            return <th key={k}>{k}</th>
        })
    }

    getRowsData = function(){
        var items = this.props.data;
        var keys = this.getKeys();
        return items.map((r,i)=>{
            return <tr key={i}><RenderRow key={i} data = {r} keys={{keys}}/></tr>
        })
    }

    render() {
        return (
            <div>
                <table>
                    <thead>
                    <tr>{this.getHeader()}</tr>
                    </thead>
                    <tbody>
                    {this.getRowsData()}
                    </tbody>
                </table>
            </div>

        );
    }
}
const RenderRow = (props) =>{
    return props.keys.map((k,i) => {
        return <td key={props.data[k]}>{props.data[k]}</td>
    })
}

還有我的 app.js：

import './App.css';
import './components.js'
import React from 'react';
import Table from "./components";




function App() {
    var data = fetch('http://localhost:5000/api/v0.1/Organisations').then(r=>r.json());
    fetch('http://localhost:5000/api/v0.1/Organisations').then(r=>r.json()).then(d=>console.log(d));
  return (
    <div className="App">
      <header className="App-header">
        <h1>Vaultex Tech Test</h1>
        <h2>Organisations</h2>
        <Table data={data}/>

      </header>
    </div>
  );
}

export default App;

我是 React 的新手，通常在后端工作，所以如果我錯過了某種基本概念，指出它會非常有幫助。

Answer 1

您可能應該添加一些狀態處理來異步獲取內容。 例子：

import {useState, useEffect} from 'react';

//Adding a state placeholder for your result
const [myData, setMyData] = useState();
//Adding a loading state
const [loading, setLoading] = useState(true);

//Add an async load function that resolves your endpoint
const load = async () => {
  setLoading(true);
  const data = await fetch('http://localhost:5000/api/v0.1/Organisations');

  setMyData(data.json());
  setLoading(false);
}

useEffect(() => {
  //this will trigger your load function once when the component is mounted
  load();
}, []);

if (loading) return <div>Loading...</div>;

return <Table data={myData} />;