React Redux Thunk组件提前渲染问题：API数据未就绪时如何处理

我看了你的代码，发现两个核心问题引发了这个错误，咱们一步步来修复：

1. Reducer更新状态时丢失了原有数据 #

你的START_FETCH分支直接返回{ isFetching : true }，这会把原state里的array字段完全覆盖成undefined。虽然你在render里判断了isFetching为true时显示Loading，但状态更新后this.props.array变成undefined，哪怕没走到渲染数据的分支，也可能触发React的空值检查错误。

修改Reducer的START_FETCH分支，用扩展运算符保留原有状态：

export let fetchApiReducer = (state={isFetching : false, array : []},action) => {
 switch(action.type){
 case 'START_FETCH':
 // 保留原有array，仅更新isFetching状态
 return { ...state, isFetching : true }
 break;
 case 'END_FETCH':
 return{ isFetching : false, array : action.array }
 break;
 default:
 return state;
 }
}

2. Render函数缺少默认返回值 #

当请求完成但array长度为0（比如API返回空数组）时，你的render函数没有任何返回值，这会触发React报错——组件的render必须返回React元素、null或false，不能返回undefined。

给render函数添加默认返回逻辑：

render() {
 if(this.props.isFetching == true) {
 return (<p>Loading</p>);
 } else if (this.props.isFetching == false && this.props.array.length >= 1) {
 return (
 <div>
 {this.props.array.map(this.renderList)}
 </div>
 );
 }
 // 添加默认返回，避免返回undefined
 return null;
 // 也可以返回空状态提示：return <p>No data available</p>;
}

3. 可选优化：替换废弃的生命周期方法 #

componentWillMount在React 17已被标记为废弃，推荐用componentDidMount触发数据请求，效果一致且符合最新规范：

componentDidMount() {
 this.props.fetchApi();
}

为什么这些修改能解决问题？ #

• 修复Reducer后，请求过程中array会保留初始空数组，不会变成undefined，避免了潜在的空值访问错误。
• 添加默认返回值后，无论什么场景render都能输出合法的React内容，彻底消除了"Consider adding an error boundary"的提示。

修改后组件会先显示Loading，请求完成后渲染数据，或在数据为空时显示默认状态，不会再提前触发错误。

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