使用自定义钩子中的 axios 响应本机 useState 钩子不使用异步调用更新状态

Question

我创建了一个自定义挂钩来对返回对象数组的 rest api 进行异步调用。我有两种异步方法。第一个方法返回一个对象列表。在成功的休息调用中，状态数组 [dataEntry] 得到更新，但在第二次调用时，发布请求返回单个对象。当我尝试将新返回的对象添加到状态数组 [dataEntry] 时，我无法看到添加到数组中的新对象。

import { useState, useContext } from 'react';
import restApi from '../api/restApi';
import { Context as AuthContext } from '../context/AuthContext';


export default () => {
    const { state } = useContext(AuthContext);
    const [lastPage, setLastPage] = useState(true);
    const [nextPageNumber, setNextPageNumber] = useState(0);
    const [dataEntry, setDataEntry] = useState([]);
    const [errorMessage, setErrorMessage] = useState(null);
    const [dataUpdate, setDataUpdate] = useState(false);


    const getAllData = async (pageNumber, pageSize) => {
        try {
            restApi.get('/data/list', {
                headers: {
                    Authorization: 'Bearer ' + state.tokenData,
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                console.log(response.data.result);
                setLastPage(response.data.lastPage);
                setNextPageNumber(response.data.nextPageNumber);
                setDataEntry([...response.data.result]);
                setDataUpdate(true);
            })


        } catch (error) {
            console.log(error.response.data);
        }
    }

    const createData = async ({ dataName }) => {
        try {
            console.log('creating data ' + dataName);
            restApi.post(
                "/data", {
                dataName
            }, {
                headers: {
                    Authorization: 'Bearer ' + state.tokenData,
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                console.log(response.data);
                console.log(dataEntry.length)
                setDataEntry([...dataEntry, response.data]);
                console.log(dataEntry.length)
                setDataUpdate(true);
            })


        } catch (error) {
            console.log(error.response.data);
        }
    }



    return [getAllData, createData, dataEntry, lastPage, nextPageNumber, dataUpdate];


}

Answer 1

由于您要根据之前的状态更新状态dataEntry，因此将回调函数传递给setDataEntry。还要确保传播prev状态并合并响应结果。

getAllData 函数

...
setDataEntry(prev => [...prev, ...response.data.result]);
...

createData 函数

...
setDataEntry(prev => [...prev, ...response.data]);
...

另外，在createData 函数中，console.log(dataEntry.length) 不会打印最新结果，因为状态更新是异步的。