如何使用 axios 并获取 JSON 数据

Question

我对 axios 有疑问。我现在尝试使用 material-table 库并制作 table。我想从“CheckListService”获取 Json 数据并将变量设置为“dataAll”，但它不起作用。我设置变量控制台说

Line 10:11: 'data' is assigned a value but never used no-unused-vars

可能很容易出错，但我没看懂。请告诉我为什么它不起作用。

CheckList.js

import axios from 'axios'

const CHECKLIST_REST_API_URL = 'http://localhost:8080/api/list';

class CheckListService {

    getList() {
        return axios.get(CHECKLIST_REST_API_URL);
    }
}


export default new CheckListService();

Table.js

import React from 'react';
import MaterialTable from 'material-table';
import CheckListService from '../services/CheckList';

export const Table = () => {

    let dataAll = [];


    const data = () => {
        CheckListService.getList().then((response) =>
            dataAll = response.data
        )
    }



    const columns = [
        {
            title: 'リスト番号', field: 'listNo'
        },
        {
            title: '採用日', field: 'saiyouDate'
        },
        {
            title: 'バージョン', field: 'version'
        },
        {
            title: '種別', field: 'shubetu'
        },
        {
            title: 'ライセンス', field: 'licenseManage'
        },
        {
            title: '用途', field: 'youto'
        },
        {
            title: '備考', field: 'bikou'
        },
        {
            title: '承認者', field: 'authorizer'
        },
        {
            title: '承認日', field: 'approvalDate'
        },
        {
            title: 'URL', field: 'url'
        }
    ]


    return (
        <div>

            <MaterialTable title="MaterialTable"

                data={dataAll}
                columns={columns}


            />
        </div>
    )


}

Answer 1

几件事 -

使用状态，以便在您从 API
对运行异步请求使用效果，在你几乎运行请求重新呈现的那一刻，这很糟糕。

const [dataAll, setDataAll] = useState([]);

useEffect(() => {
   CheckListService.getList().then((response) =>
      setDataAll(response.data)
   )
}, []) // <!-- empty array has this effect run once, on mount.

如何使用 axios 并获取 JSON 数据

How to use axios and get JSON data

javascript

reactjs

axios

material-table