状态对象未在函数调用中使用响应数据进行更新答案

【问题标题】：State object not updating with response data in function call状态对象未在函数调用中使用响应数据进行更新
【发布时间】：2021-05-18 09:10:04
【问题描述】：

我目前正在尝试设置一个名为“newTask”的状态，它是以下格式的对象：

const [newTask, setNewTask] = useState({ _id: "", parentTaskId: "", accountId: "", title: "", status: false, createdDate: "" })

根据后端发布请求的成功设置状态，并接收返回的响应数据。

响应数据正确。它肯定会返回正确的值，即 id、parentTaskId、accountId、title、status 和 createdDate。

例如，这是一个返回的响应：

_id: "example id"
accountId: "example"
createdDate: "2021-05-18T08:59:18.468Z"
parentTaskId: "example"
status: false
title: "example title"

但是，当我使用此响应设置状态时，它没有正确输入数据，当它们附加到父状态数组时，它们都是空字符串。

这是我的代码：

const addTask = () => {

    axios.post("/apiquery", {
        parentTaskId: id,
        accountId: userId,
        title: title,
        status: false,
        createdDate: new Date()
    })
    .then(async (response) => {
        const data = await response.data.response
        return data
    })
    .then((data) => {
        console.log(data)
        return setNewTask({ _id: data._id, parentTaskId: data.parentTaskId, accountId: data.accountId, title: data.title, status: false, createdDate: data.createdDate })
    })
    .then(() => {
        setTasks([...tasks, newTask])
        console.log(tasks)
    })
    
}

希望在这里你可以有以下步骤：

请求已发布到我的 API
我在等待 response.data
我在控制台记录数据，然后尝试设置我的 newTask 状态
然后我尝试将此 newTask 附加到我的整个任务数组状态的末尾

控制台日志数据正确。控制台日志任务显示附加的数据只是一个空字符串的对象，表明它没有附加正确的newTask（似乎是最初的）或者没有正确附加newTask。

任何关于我做错了什么的指针将不胜感激。

【问题讨论】：

不要将async-await 语法与promise 链接混用，最后一个then() 方法中的newTask 来自哪里？
尝试以下步骤： 1. 从第一个then方法的回调函数中去掉async关键字。 2. 不等待，而是返回response.data.response 的结果。 3. 在第二个then 方法中，从data 参数创建一个newTask 对象。 4. 将此newState 对象传递给setTasks 和setnewTask 函数。 5.删除最后一个then方法。
是的，这行得通。这让我意识到我也不一定需要那个 newTask 状态——我可以只拥有一个状态字符串，我将它作为参数传递给发布请求。感谢您的帮助！

标签： reactjs

【解决方案1】：

请将代码替换为以下代码并尝试。

const addTask = () => {

    axios.post("/apiquery", {
        parentTaskId: id,
        accountId: userId,
        title: title,
        status: false,
        createdDate: new Date()
    })
    .then((response) => response.data.response)
    .then(data => {
        console.log(data)
        const task = {
            ...data,
            status: false
        }
        setNewTask(task);
        setNewTask([...tasks, task]);
    })
}

无需使用额外的 then 块将当前任务添加到数组中。

【讨论】：