当状态在函数中被修改，然后在同一个函数中我使用状态时，状态不会更新。它仍然未修改答案

【问题标题】：When state gets modified in function, and then later in the same function I use the state, the state is not updated. It is still unmodified当状态在函数中被修改，然后在同一个函数中我使用状态时，状态不会更新。它仍然未修改
【发布时间】：2022-01-05 21:57:30
【问题描述】：

问题说明：我有一个函数，在这个函数中我发出一个 REST 删除请求。在此 REST 删除之后，我获取新数据。当我想在同一个函数中处理新数据时，在我获取新数据之后，我仍然拥有旧数据，以及我刚刚删除的对象。

父伪代码：

const Parent = () => {
   const [listOfMessages, setListOfMessages] = useState();
   
   async function fetchMessages() {
    let response = await //Make rest call to get Messages
    setListOfMessages(response);
   }

   async function deleteMessage(messageId) {
    await //Make rest call to delete message with id
    fetchMessages(response);
   }

  return (
    <Child deleteMessage = {deleteMessage} fetchMessage = {fetMessage} listOfMessages ={listOfMessages}/>
  )


}

子伪代码：

const Parent = (props) => {

async function handleDeletetButtonClick() {

  //Delete newest message
  await props.deleteMessage(0)

  //Fetch Messages
  await props.fetchMessages()

  //Display all messages, here it does still contain message 0, which i just deleted
  console.log(props.listOfMessages)
}


  return (
        <Button onClick={handleDeletetButtonClick}/>
  )


}

我在任何地方都放了 await 关键字，一切都以正确的顺序执行，首先它被删除，完成后获取新消息，然后将消息打印到控制台。我在每个函数的末尾用 consol.log 验证了这一点。我目前的解释是组件需要重新渲染，以便使用新数据获得新道具，我将如何实现这一点？如果我的假设是正确的。

我有一个解决方法，但也许有更好的解决方案。

解决方法：自己用函数中的 setListOfMessages() 删除消息，然后恢复正常。

感谢您的帮助。

【问题讨论】：

标签： reactjs asynchronous async-await react-props

【解决方案1】：

在您的deleteMessage 函数中，您是否使用useState() 来更新listOfMessages 的内容？您需要使用 useState 等 React 方法，以便您的子组件自动获取新道具并重新渲染。

您应该向我们详细说明deleteMessage 的具体实现方式。

【讨论】：

不，在 deleteMessage 中我不使用 useState 来更新状态，但是稍后在函数 fetchMessages 中被调用，并且状态被 setListOfMessages() 更新。所以应该没问题。删除功能没有更多信息，我只是没有写出删除请求。否则一切都在那里。
您应该在deleteMessage 函数中正确更新状态。此外，看起来您在父组件的 return 语句中可能有错字：fetchMessage = {fetMessage}