在 axios 请求后自行更新状态？

Posted 2023-04-14

【中文标题】在 axios 请求后自行更新状态？

【英文标题】：React state updating on its own after axios request?

【发布时间】：2019-08-09 23:15:13

【问题描述】：

我目前正在开发一个 React 应用程序，我正在使用 React 的上下文 API 来整合应用程序的业务逻辑。

在上下文中，所有 CRUD 函数都向 API 发出 axios 请求并返回可以被组件用来处理错误处理和输入的 Promise。这是上下文https://github.com/luckyrose89/notes-app/blob/master/src/AppContext.js

我的应用有一个 notebooks 数组，其中包含各个笔记本对象。这些对象中的每一个都有一个 notes 数组，该数组引用每个 notebook 中的笔记。这是 API 控制器 https://github.com/luckyrose89/notebook-app-backend/blob/master/controllers/notebook.js

只要我在创建、阅读、更新和删除笔记本，我就必须更改应用上下文中的状态，以便在我的应用中更新内容。但是，当我在笔记本的 notes 数组中创建、读取、更新或删除任何内容时，我不必对状态进行这些更改。我返回承诺，状态会自行改变。谁能帮我理解为什么会这样？

例如，当我在笔记本中创建一个新笔记并使用它提交时：

handleSubmit = event => 
event.preventDefault();
this.props
  .createNotepage(this.props.match.params.id, this.state)
  .then(response => 
    this.clearInputs();
    this.props.history.push("/viewbooks");
  )
  .catch(err => 
    this.setState(
      errorMessage: err.response.data.error
    );
  );;

我不必通过手动将来自 api 的响应添加到笔记本的 notes 数组来更改应用程序上下文中的状态。谁能解释一下。

【问题讨论】：

我不太明白你的问题。不是每次操作后调用setState，会更新状态，Provider的value会发生变化，导致所有消费者更新？

@Tholle 我没有在笔记页上执行操作之后调用 setstate。我访问组件中的这些操作并为它们提供相关参数。我的问题是，一旦在笔记数组中的笔记本对象中添加、更新或删除笔记，应用程序上下文中的笔记本数组如何自行更新，而无需我更改状态。对于这里的混乱，我真的很抱歉

【参考方案1】：

不要传递this.state，而是尝试传递...this.state，看看会发生什么