ReactJS无法渲染待办事项：this.props.todos.map不是函数

嘿，作为React新手碰到这个问题太正常了！本质原因很简单：map()只能在数组上调用，而你的this.props.todos要么不是数组，要么初始状态是undefined/null。下面给你几个快速简便的修复方案：

1. 给状态设置数组初始值 #

首先，在App组件的constructor里，把data的初始值设为空数组。这样即使API请求还没完成，传给Todos组件的todos也是一个空数组，不会触发map的错误：

constructor(props) {
  super(props);
  this.state = {
    data: [] // 关键：初始化为空数组
  };
}

2. 确认API返回的数据结构 #

你说控制台能看到数据，但要仔细看这个数据是不是直接的数组。比如很多API会把数组包裹在对象里（比如{ todos: [{}, {}, ...] }），这时候你直接setState({ data: data })的话，this.state.data是个对象，传给todos后自然不能用map。

如果是这种情况，修改AJAX的成功回调：

$.get('你的API地址', (responseData) => {
  // 假设API返回的是 { todos: [...] }，取数组部分
  this.setState({ data: responseData.todos });
});

3. 在子组件里做安全判断（额外保险） #

在Todos组件里，先判断todos是否为数组再执行map，避免意外情况：

// Todos.js里的渲染部分
render() {
  const { todos } = this.props;
  // 先确认是数组再map
  return (
    <div>
      {Array.isArray(todos) ? todos.map(todo => (
        <div key={todo.id}>{todo.text}</div>
      )) : null}
    </div>
  );
}

按这几步来，应该马上就能解决问题啦！

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