React获取数据后组件无法重新渲染问题求助

核心问题是直接修改state对象而未使用React提供的setState()方法，React不会监测到直接的state属性赋值，也就不会触发组件重新渲染，导致isFetched始终保持初始值false，页面一直显示加载提示。

修正后的代码 #

constructor(props) {
  super(props);
  this.state = {
    isFetched: false,
    profile: []
  }
}

async componentDidMount() {
  let profile = await checkProfile();
  if(profile && !isEmpty(profile)) {
    // 使用setState更新状态，触发重新渲染
    this.setState({
      profile: profile,
      isFetched: true
    });
  }
}

render() {
  return this.state.isFetched ? <HomeTPL {...this.props} /> : 'Loading data please wait...';
}

关键说明 #

• React要求必须通过setState()方法更新组件状态，这个方法会通知React状态已变更，进而触发组件的重新渲染流程。
• 直接修改this.state属于非规范操作，React无法捕获这种变更，自然不会更新视图。
• 如果需要基于当前state更新新状态（比如状态依赖之前的值），可以使用setState()的函数形式，比如：

  this.setState(prevState => ({
    count: prevState.count + 1
  }));
  

内容的提问来源于stack exchange，提问作者rochellecanale