Question

每当我尝试从componentWillMount获取结果时，应用程序首先触发render（），然后命中componentWillMount获取我的结果，设置状态然后再次点击渲染。

componentWillMount= () => {
    let team = gh.getRepo('Microsoft', 'vscode');
    team.getContributors(function(err, members){
    }).then(response => {
      this.setState({
         data: response.data
      });
   });
}


render() {
    var ghList = this.state.data;
    const names = ghList.map(name => { //when it runs the first time this map in invalid since ghList is null from my this.setState= {data:null}
})
return (
      <div className="flip-container" onClick={this.onTileClick}>
        <div className="flipper">
          <div className="front">
              <img className="circle" src={this.state.avatar_url} alt={this.state.login}/>
          </div>
        <div className="back">
        </div>
      </div>
      </div>
)

Answer 1

如果我理解正确，那就是预期的行为。发生了什么：

componentWillMount（）：会触发异步请求（getContributors）。
渲染（），this.state.data = undefined。
调用来自getContributors的回调（响应已经到来），然后调用setState：setState计划新的渲染。
渲染（），填充为this.state.data

您必须处理初始状态渲染（在ajax返回之前，组件将如何呈现：可能是一些加载微调器......）。因此，在render方法中，您可以检查this.state.data是null / undefined并绕过您的逻辑。或者，在构造函数中，将数据设置为空数组：

constructor(props) {
  super(props);
  this.state = {
    data: []
  }
}

这样，至少ghList.map不会抛出错误。

为什么我的render函数在componentWillMount之前运行

1 个答案: