axios.get().then()内的setState()不会导致重新渲染(React/Axios/Antd)

Question

我正在编写一个 React 组件，它为 Ant Design

<Table/>

获取数据以进行渲染。除了刷新按钮和组件加载时的一次性数据获取之外，我在 Ant Design

<Table/>

上有一列，其中包含一个用于删除该按钮所在行的按钮。

<Table/>

中显示的数据存储在称为

data

的状态变量中。为了更新由 (1) 初始页面加载、(2) 刷新按钮 onClick 和 (3) 删除按钮 onClick 触发的

data

请求；我正在使用一个

axios.get()

块，在其中调用

.then()

方法。

setData

在初始加载和单击刷新按钮时正确更新，但对于删除按钮，它仅在首次加载组件时才起作用。但是，当我使用条件渲染切换到另一个组件（我使用 Ant Designs 的

data

）并返回时，删除

<Menu/>

停止工作。

setData

仍在执行，我可以在检查器的“网络”选项卡上看到正在解析的 HTTP 请求。返回的有效负载也是正确的，删除的条目已被删除。澄清一下，这个

axios.get()

在它自己的

axios.get()

块中被调用，等待删除 API 调用的承诺。这是应该重新渲染的组件：

.then()

这是在 

import React, {useCallback, useEffect, useState} from "react";
import axios from "axios";
import {Table} from "antd";
import CreateButton from "../../../components/buttons/CreateButton";
import SearchButton from "../../../components/buttons/SearchButton";
import RefreshButton from "../../../components/buttons/RefreshButton";
import {actionRender} from "../../../utils/methods/actionRender";

function Content({viewName, endpoint, columns, handleCreate, submitted}) {
    const [spinner, setSpinner] = useState(false);
    const [data, setData] = useState([]);
    const [total, setTotal] = useState(0);

    const fetchRecords = useCallback((page) => {
        setSpinner(true);
        return axios
            .get(`/api/${endpoint}/?page=${page}`)
            .then((response) => {
                setData(response.data.results);
                setTotal(response.data.count);
            })
            .then(() => setSpinner(false));
    }, [endpoint]);

    useEffect(() => {
        void fetchRecords(1);
    }, [endpoint, fetchRecords, submitted]);

    useEffect(() => {
        if (columns[columns.length - 1].key !== 'action') {
            columns.push({
                title: '',
                key: 'action',
                render: (_, record) => (actionRender(endpoint, record.id, () => void fetchRecords(1)))
            });
        }
    }, [endpoint, columns, fetchRecords]);

    return (
        <>
            <h2>{viewName}</h2>
            <div id="content-header">
                <SearchButton/>
                <RefreshButton onClick={fetchRecords}/>
                <CreateButton handleCreate={handleCreate} disabled={endpoint === 'users'}/>
            </div>
            <Table
                dataSource={data}
                columns={columns}
                loading={spinner}
                rowKey="id"
                pagination={{
                    defaultCurrent: 1,
                    pageSize: 11,
                    total: total,
                    onChange: fetchRecords
                }}
            />
        </>
    );
}

export default Content;

方法内渲染的

<DeleteButton/>

：actionRender()

我可以看到 

import React from "react";
import {Button} from "antd";
import {DeleteFilled} from "@ant-design/icons";
import {deleteRecord} from "../../api/delete";

function DeleteButton({endpoint, id, refresh}) {
    return (
        <Button
            type="link"
            icon={<DeleteFilled/>}
            danger
            onClick={() => {
                deleteRecord(endpoint, id)
                    .then(refresh)
            }}
        />
    )
}

export default DeleteButton;

可以正常工作以进行初始加载和刷新按钮触发。我还可以看到，在发送 DELETE 请求后，

fetchRecords()

正在获取正确更新的数据负载。但是，与其他两个触发器不同的是，尽管新获取了不同的数据，但删除不会导致组件重新渲染。我认为唯一的原因可能是

axios.get()

没有使用新获取的有效负载正确更新

setData

，但我不知道为什么。

Answer 1

data