Question

我的嵌套状态如下：

this.state = {
  urls: {

    site1:[]
    site2:[]
    site3:[]

  }

}

我有一个更新网址的功能，即site1，site2和site3

create_urls(sitename){
   ..... some logic to produce list of urls based on sitename
  this.setState({ urls:{
        ...this.state.urls,
        [sitename]: [url1,url2 ..... ]
      }
   });
}

现在我想填写下面的网址

componentDidMount(){
    this.create_urls("site1");
    this.create_urls("site2");
    this.create_urls("site3");
}

我发现最终只有site3网址显示为site1，site2显示为空。我期待填写所有三个网站的网址。

状态异步变化。如果我在其中放入一个带有console.log的回调函数，我就能看到它。

那么如何在mount之后输入所有网站的网址。

Answer 1

create_urls(sitename){
   ..... some logic to produce list of urls based on sitename
   return urlArray

}

componentDidMount(){
   const url1Array = this.create_urls("site1");
   const url2Array = this.create_urls("site2");
   const url3Array = this.create_urls("site3");
    this.setState({ 
     site1: url1Array,
     site2: url2Array,
    site3: url3Array,

   });

}

Answer 2

你可以简单地将一个函数传递给setState调用，然后你可以安全地将以前的状态与新的状态同步

InMemory

reactjs：如何为嵌套对象同步多次setState

2 个答案: