Question

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

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

我的应用程序具有一个Notebooks数组，其中将包含单个笔记本对象。每个对象都有一个notes数组，该数组引用每个笔记本中的笔记。这是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数组来更改应用上下文中的状态。谁能解释一下。

Answer 1

instead of passing this.state, try passing {...this.state} and see what happens

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

1 个答案: