在 axios 请求后更新 React Hook答案

【问题标题】：Update React Hook after axios request在 axios 请求后更新 React Hook
【发布时间】：2021-09-12 09:10:55
【问题描述】：

我认为我离解决方案不远了，但我现在陷入困境。

这是我的组件，带有一个按钮，可以删除 mongoDB 集合中的一行：

Object.entries(userWalletIncomes).map(([key, value]) => {
                        return (
                            <div id="incomeTable" className="text-left mx-auto flex" key={key}>
                                <p className="w-32 border p-1 capitalize">{key} :</p>
                                <p className="w-32 border p-1 text-green-500">{value}€</p>
                                <button onClick={(e) => handleDeleteIncome(key)}><i className="fas fa-times text-gray-400 text-xs p-1"></i></button>
                            </div>
                        )
                    })

这是我发出 axios 请求的函数，then 使用钩子设置新状态：

const handleDeleteIncome = (key) => {
        let data = { [key]: "" }
        axios({
            method: "delete",
            url: `${process.env.REACT_APP_API_URL}api/balanceOneIncome/${uid}`,
            data: data
        })
            .then(() => setUserWalletIncomes(userWalletIncomes))
    }

问题是，我必须重新加载页面才能看到新状态。我想避免重新加载页面

有什么想法吗？

【问题讨论】：

在反应方式中，您必须重置列表，因此无法避免重新加载页面。尽量给每一行一个唯一的 id 以避免每行刷新。

标签： javascript reactjs axios react-hooks state

【解决方案1】：

.then 函数需要回调，您目前只是在其中调用 setUserWallerIncomes() 而不是像这样将其作为回调传递：

    .then((res) => {
         console.log(res.data) // do something with the response data
        setUserWalletIncomes(res.data) // not sure what your response type is but that's probably what you're looking for
     })

编辑：userWalletIncomes 是一个对象，因此将 setState 更改为对象

【讨论】：

感谢您的帮助。但是这段代码会出现同样的错误?
错误：未处理的拒绝（TypeError）：userWalletIncomes 不可迭代
您也在尝试设置状态但使用扩展运算符？也许您正在尝试做类似我的编辑 setUserWalletIncomes([...userWalletIncomes, res.data]) 的事情。不知道你的响应代码是什么。
可能无关紧要，但无论何时使用这样的状态对象，请务必使用功能状态更新，以便您从前一个状态更新，而不是回调中关闭的任何状态，即setUserWalletIncomes(userWalletIncomes => [...userWalletIncomes, res.data]);
好的，你只是将 state 设置为与 .then(() => setUserWalletIncomes(userWalletIncomes)) 相同的值。您必须根据您的响应数据和需求使用 axios.then 和 setUserWalletIncomes 中的响应数据