Reactjs 集合状态与子组件的关系

我制作了一些应用程序来从远程服务器异步获取数据。 该应用程序只是父组件-获取数据，和两个子组件

用于显示异步数据的一个子组件。 过滤器功能的其他子项。只需输入字符串，用户键入的内容和第一个组件中的数据将显示相应的项

到处都有许多带有控制台.log的代码，但在简单的方案中：

class App extends Component {

  state = {isLoading:true, query:''}

  getData = (location) => {
    axios.get(endPoint).then(response=>{ response.map((item) => { places.push(item)})
                                         // *****  first setState
                                         this.setState({isLoading:false})
                                       })
    }

  updateQuery = (e) => {
    // *****  second setState
    this.setState({query:e.target.value.trim()})
  }

  componentDidMount(){
    this.getData(location)
  }
  render() {
    if (!this.state.isLoading){
      if (this.state.query){
        const match = new RegExp(escapeRegExp(this.state.query),'i')
        searchTitles = places.filter(function(item){return match.test(item.name)})
      }else{
        searchTitles = places.slice();
      }
    }

    return (
      <div className="App">
          <input type='text' onChange={this.updateQuery} value={this.state.query}/>
          <List places = {searchTitles}/>
      </div>
    );
  }
}

export default App;

类应用程序扩展组件{
状态={isLoading:true，查询：“”
getData=（位置）=>{
get（endPoint）.then（response=>{response.map（（项）=>{places.push（项）}）
//******第一设置状态
this.setState（{isLoading:false}）
})
}
updateQuery=（e）=>{
//******第二个设置状态
this.setState（{query:e.target.value.trim（）}）
}
componentDidMount（）{
this.getData（位置）
}
render（）{
如果（！this.state.isLoading）{
if（this.state.query）{
const match=new RegExp（escapeRegExp（this.state.query），'i'）
searchTitles=places.filter（函数（项）{return match.test（项.name）}）
}否则{
searchTitles=places.slice（）；
}
}
返回(
);
}
}
导出默认应用程序；

当使用时状态发生变化时，一切正常-下一个子组件中的内容刷新

但是显示数据的子组件-一些内容不完整的项目。。。没有照片和一些文字信息。因此，可能是在获取远程数据之前对其进行了渲染

但是为什么它不在状态之后重新呈现呢？isLoad切换到的'false'（在代码中-得到响应之后）

我将代码放入console.log中以跟踪进程。。。奇怪的是：state.isLoad在部分数据来自服务器之前切换为false。(((

我不在子组件中使用ShouldComponentUpdate（）。

每个React

setState（）

将始终导致重新渲染，除非

shouldComponentUpdate（）

返回false

---

如前所述，避免重新渲染的一种方法是

shouldComponentUpdate

返回

false

（

shouldComponentUpdate

接受

nextrops

和

nextState

）但不清楚为什么有人会用

setState

触发状态更改，然后用

shouldComponentUpdate

取消该状态更改更改更改道具或状态触发组件的重新提交（除非其专门设置为避免此），其中当然包括作为组件一部分呈现的所有其他组件。我编辑了我的问题，提供了更多详细信息。你能看一下吗？你使用了很多未定义的变量，如

位置
和
位置
–请做一个。我删除了所有定义变量的字符串…-上面的代码-只是简化方案。。。它显示了实现的一般方式。我认为您的观点是错误的：更改道具或状态会触发组件的重新渲染器（除非它专门设置来避免这种情况），根据[article:（）仅当
render（）时才在子组件中重新渲染
拥有直接从父级获得的
状态的道具。我认为您的观点是错误的：setState（）总是会导致重新渲染，除非shouldComponentUpdate（）返回false。根据此[article:]（仅当
render（）时，才在子组件中开始重新渲染）
拥有直接从父级获得的
状态
道具。