使用kriasoft/react-starter-kit时组件无法重新渲染的问题

嘿，我看你用react-starter-kit开发时遇到了组件不更新状态的问题——一直卡在"Loading..."，没法切换到数据加载完成的状态。结合你的代码和react-starter-kit的同构特性，我帮你梳理下问题和修复方案：

问题根源 #

1. componentWillMount的坑：react-starter-kit是同构应用（服务端+客户端都要渲染），componentWillMount会在服务端执行，但这里的异步fetch操作结果不会同步到客户端的组件状态里。而且这个生命周期钩子在React 16.3之后已经被标记为不安全，完全不适合用来做异步数据获取。
2. 错误处理不完整：如果你的API请求失败（比如服务没启动、跨域问题），setState({isLoading: false})根本不会执行，组件就永远卡在加载状态了。

一步步修复 #

1. 把componentWillMount换成componentDidMount #

componentDidMount只会在客户端渲染完成后执行，是React官方推荐的异步数据获取时机：

// 删掉原来的componentWillMount，换成这个
componentDidMount() {
  this.getObjectsFromApiAsync();
};

2. 补全错误处理逻辑 #

不管请求成功还是失败，都要把加载状态关掉，避免组件一直转圈圈：

async getObjectsFromApiAsync() {
  try {
    const response = await fetch('http://localhost:3030/api');
    // 这里加个响应状态检查！HTTP 404/500这类错误不会触发catch，得手动判断
    if (!response.ok) {
      throw new Error(`请求出错啦！状态码: ${response.status}`);
    }
    const content = await response.json();
    this.setState({isLoading: false});
  } catch(e) {
    console.error('获取数据失败:', e);
    // 失败也要更新状态！
    this.setState({isLoading: false});
  }
}

3. 可选优化：添加错误提示（提升用户体验） #

可以给组件加个错误状态，请求失败时告诉用户出问题了：

// 修改constructor里的state
constructor(...args) {
  super(...args);
  this.getObjectsFromApiAsync = this.getObjectsFromApiAsync.bind(this);
  this.state = {
    isLoading: true,
    errorMsg: null, // 新增错误信息字段
  };
}

// 修改catch块
catch(e) {
  console.error('获取数据失败:', e);
  this.setState({isLoading: false, errorMsg: e.message});
}

// 更新render方法
render() {
  if (this.state.isLoading) {
    return <p>Loading...</p>;
  }
  if (this.state.errorMsg) {
    return <p>哎呀，加载失败了: {this.state.errorMsg}</p>;
  }
  return <p>Data loaded!!</p>;
}

最后验证一下 #

1. 先确认你的API服务器http://localhost:3030/api确实在跑，能返回合法的JSON
2. 打开浏览器控制台看看有没有报错（比如跨域、网络连接失败）
3. 替换代码后重启开发服务，再测试组件状态切换

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