NodeJS、ReactJS：Axios 帖子没有及时更新答案

【问题标题】：NodeJS, ReactJS: Axios post not updating in timeNodeJS、ReactJS：Axios 帖子没有及时更新
【发布时间】：2019-10-31 11:20:28
【问题描述】：

我对 axios 发布请求有一个非常奇怪的问题。在反应组件的 onSubmit 函数中，我有一个 axios 帖子，它发送一个 UID 并检索集合中具有该 UID 的项目数。在我的情况下，是用户购物篮中的物品。然后我希望能够将该数量的项目设置为组件状态，以便以后使用它进行验证。出于某种原因，当我调用请求并打印 res.data 时，我得到了正确的输出，即当前篮子中该 UID 的项目数。但是，当我使用 setState 调用时，它首先不会改变状态。当我在篮子里添加物品时，它给了我以前的价值。

axios.post('http://localhost:5000/basket/check', {uid : UID})
    .then(res => this.setState({basket: res.data}))
    .catch((error) => {
        console.log(error);
      })

    console.log(this.state.basket);
    if (this.state.basket < 4) {
        this.props.addBasketItem(basketItem);

    }

这是我的代码。例如，我将篮子项目设置为状态 0。当函数被调用前两次时，console.log(this.state.basket);打印 0。然后添加 1,2,3,4 作为项目。但是篮子里的物品数量总是多 2 件，这真的很奇怪。我做错了什么？

【问题讨论】：

你需要 async 和 await 你在 componentDidMount() 中这样做吗？
不一定。在这里使用 Promise 链接是一件非常好的事情。
onSubmit(e) 按钮的函数，因此在按下按钮后不会重新渲染
需要等待API调用完成的所有东西都需要在.then或者await之后，否则可能在数据到来之前发生背部。在您的示例中，console.log 不在.then 内。
我的回答有道理吗？

标签： javascript node.js reactjs

【解决方案1】：

由于 state 的设置是异步的，你应该在设置 state 之后使用回调函数，以确保只有在设置 state 之后，你才能使用最新的数据。试试这个...

checkBasket = () => {
  const { basket } = this.state;
  if (basket < 4) {
     this.props.addBasketItem(basketItem);
  }
}

axios.post('http://localhost:5000/basket/check', {uid : UID})
    .then(res => this.setState({basket: res.data}, () => this.checkBasket())
    .catch((error) => {
        console.log(error);
      });

【讨论】：

【解决方案2】：

据我了解，您希望在设置状态后立即访问它，我们可以通过 setState 回调完成此操作。

  submitHandler = () => {
    axios
      .post("http://localhost:5000/basket/check", { uid: UID })
      .then(res =>
        this.setState({ basket: res.data }, () => {
          console.log(this.state.basket);
          if (this.state.basket < 4) {
            this.props.addBasketItem(basketItem);
          }
        })
      )
      .catch(error => {
        console.log(error);
      });
  };

更好的解决方案是使用 componentDidUpdate 生命周期。

  submitHandler = () => {
    axios
      .post("http://localhost:5000/basket/check", { uid: UID })
      .then(res => this.setState({ basket: res.data }))
      .catch(error => {
        console.log(error);
      });
  };

  componentDidUpdate(prevProps, prevState) {
    console.log(this.state.basket);
    if (this.state.basket < 4) {
      this.props.addBasketItem(basketItem);
    }
  }

【讨论】：