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。继续使用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

ReactJs试图从回调中获取变量

1 个答案: