Question

我想使用从数据库中获取的数据来为以下状态设置状态。尽管控制台中显示了地址，但此setState函数无法正常工作。.pls告诉我这是怎么回事？

   componentDidMount(){


  fetch('http://localhost:3000/reg/view/'+ this.props.match.params.id,{
method:"GET",
headers: {
  "Content-Type": "application/json"
},

})
 .then(function(response){ 
  return  response.json();


   })
  .then(function(data){
  console.log(data.address);

  this.setState({
    username:data.username,
    shopname:data.shopname,
    shopdesc:data.shopdesc,
    address:data.address,
    city:data.city,
    mobile:data.mobile,

  })

    })
   .catch(function() {
     console.log('error handling');
   window.alert("something is going wrong..!!")
 });


    }

Answer 1

您想对then函数使用箭头语法，以将this的范围保持为componentDidMount，以便setState起作用

了解更多here

componentDidMount(){
  fetch('http://localhost:3000/reg/view/'+ this.props.match.params.id,{
    method:"GET",
    headers: {
      "Content-Type": "application/json"
    }
  })
  .then(response => { 
    return response.json();
  })
  .then(data => {
    console.log(data.address);
    this.setState({
      username:data.username,
      shopname:data.shopname,
      shopdesc:data.shopdesc,
      address:data.address,
      city:data.city,
      mobile:data.mobile
    })
  })
  .catch(err => {
    console.log('error handling');
    window.alert("something is going wrong..!!")
  });
}

Answer 2

尝试使用React official doc中推荐的setState回调函数。这里是他们推荐的主要内容：

... setState（）并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。这使得在调用setState（）之后立即读取this.state可能是一个陷阱。相反，请使用componentDidUpdate 或setState回调（setState（updater，回调）），确保在应用更新后可以触发这两种方法。

因此，使用箭头函数和回调，您的代码应如下所示：

 this.setState(() => ({
    username:data.username,
    shopname:data.shopname,
    shopdesc:data.shopdesc,
    address:data.address,
    city:data.city,
    mobile:data.mobile,

  }));

setState函数调用未更新状态，MERN堆栈

2 个答案: