Question

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

一个子组件，用于显示异步数据。过滤器功能的其他子级。只需输入字符串，用户在其中输入的内容和第一个组件中的数据就会显示适当的项目。

到处都有很多带有 console.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;

如果使用进行状态更改，则一切正常-内容在下一个子组件中刷新。

但是显示数据的子组件-有些项目内容不完整...没有照片和一些文本信息。因此可能是在获取远程数据之前呈现的。

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

我在代码 console.log 中添加了代码，以跟踪进程……和奇怪的事情：在某些部分之前， state.isLoad 切换为 false 的数据来自服务器。（（（

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

Answer 1

Per React的documentation for setState

setState()将始终导致重新渲染，除非 shouldComponentUpdate()返回false。

如前所述，避免重新渲染的一种方法是shouldComponentUpdate返回false（shouldComponentUpdate接受nextProps和nextState），但目前尚不清楚为什么有人会使用setState触发状态更改，然后使用shouldComponentUpdate取消状态更改。

关系setState和子组件

1 个答案: