ReactJs试图从回调中获取变量

Question

所以我有一个POST API，它返回刚刚创建的对象，我想在reactjs 中获取对象信息。

createItem(item){
    let temp;
    // POST to DB
    fetch(url(this.props.api), {
        method:"POST",
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            name: item,
            isCompleted:false
        })
    }).then(function (response) {
        return response.json()
    }).then(function (body) {
        temp = body; // got the objects information
        console.log(temp);
    });

    console.log(temp);

    this.state.bucket_list.push({
        name: item,
        isCompleted: false
    });
    this.setState({bucket_list: this.state.bucket_list});

}

这是我所拥有的，但我可以在 then 函数之外提取数据。获得信息后，我想setState 并将新创建的对象附加到我的state: bucketlist。但我认为由于 Javascript 的异步问题，我无法以正确的顺序执行此操作。有什么想法吗？

Answer 1

在给你答案之前，你应该知道直接改变状态被认为是一种反模式。相反，您应该将对象视为不可变的。

代替：

this.state.bucket_list.push({
  name: item,
  isCompleted: false
});
this.setState({bucket_list: this.state.bucket_list});

你应该做的

this.setState({
  bucket_list: [
    ...this.state.bucket_list,
    {
      name: item,
      isCompleted: false
    },
  ]
});

---

无论如何，让我给你两种不同的方式来处理你的用例：

1.使用 async/await（推荐）

使用async/await，您将能够等待一条指令完成，然后再转到下一条指令。

    async createItem(item){
      // POST to DB
      const data = await fetch(url(this.props.api), {
        method:"POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: item,
          isCompleted:false
        })
      });

      this.setState({
        bucket_list: [
          ...this.state.bucket_list,
          data,
        ],
      });
    }

2。继续使用 fetch 和 then 并使用箭头函数

它允许函数没有自己的this。这就是为什么您可以在arrow function 中使用this.setState。

    createItem(item){
      // POST to DB
      fetch(url(this.props.api), {
        method:"POST",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name: item,
          isCompleted:false
        })
      })
      .then(response => response.json())
      .then(data => {
        this.setState({
          bucket_list: [
            ...this.state.bucket_list,
            data,
          ],
        });
      });
    }

注意2：如果你的用例很简单，你可以继续使用这种方法。否则你一定要看看redux