状态不工作的 ReactJS Axios 补丁请求 URL

Question

我正在尝试对我的 db.json 的最后一个元素使用 axios 补丁请求。 为此，我将“id”的状态设置为来自 json 的数据的长度。如果我控制台记录我的状态，它会给我正确的数字。但是，如果我将状态放到 URL 中，那里什么也不会发生。使用普通数字而不是状态是有效的。我做错了什么？

handleSubmit = event => {
    const sub = this.newsletter();
    axios.get('http://localhost:3001/posts')
                .then(res => {
                    this.setState({id: res.data.length});
                    console.log(this.state.id);

                    
                });
                if(sub){
                    axios.patch(`http://localhost:3001/posts/${this.state.id}`,{
                        newsletter: 'yes'
                    })
                                .then(res => {
                                  console.log(res);
                                  console.log(res.data);
                                })
                            }
        
    }

Answer 1

等待状态由您的 id 更新，然后调用第二个补丁请求。因为设置状态需要一些时间。

handleSubmit = event => {
    const sub = this.newsletter();
    axios.get('http://localhost:3001/posts')
                .then(res => {
                    this.setState({id: res.data.length} , () => {
                    // NOW OUR STATE HAVE THE PROPER ID 
                    if(sub){
                      axios.patch(`http://localhost:3001/posts/${this.state.id}`,{
                        newsletter: 'yes'
                      })
                       .then(res => {
                              console.log(res);
                              console.log(res.data);
                            })
                         }
                       }  

                    });
                    
                });
                

Answer 2

setState 不同步。你可以把它想象成enqueueSettingTheState。因此，当第一个 then 块完成时，我们无法确定状态是否已设置。

您可以做的就是不在状态中存储任何内容，然后继续调用patch：

handleSubmit = event => {
  const sub = this.newsletter();
  axios.get("http://localhost:3001/posts").then(res => {
    // Read the value you want
    let id = res.data.length;
    if (sub) {
      // Use the value without storing it
      return axios.patch(`http://localhost:3001/posts/${id}`, {
        newsletter: "yes"
      })
      .then(res => {
        console.log(res);
        console.log(res.data);
      });
    }
  });
};