使用React+Redux获取API时遇this.props.items.map不是函数错误求助

这个错误的根源很明确：你在对象上调用了只有数组才有的map方法！我们来一步步排查并修复：

1. 修正初始状态的类型错误 #

看你的reducer代码：

const initialState = { items: {} }; // 这里items是对象类型

React组件初始渲染时，Redux的state就是这个初始状态，此时this.props.items是一个空对象，调用map自然会报错。你需要把初始的items改成空数组：

const initialState = { items: [] }; // 改为空数组，匹配API返回的数据类型

这样初始渲染时，空数组调用map是安全的（不会报错，只是暂时不渲染任何内容）。

2. 修复action creator的dispatch问题 #

你的getItems函数存在一个潜在bug：没有正确接收dispatch参数，会导致后续dispatch is not defined的错误。正确的写法应该用箭头函数包裹，把dispatch作为参数传入：

export const getItems = () => dispatch => {
  axios.get('https://jsonplaceholder.typicode.com/todos?_limit=10')
    .then(res => dispatch({ type: 'GET_ITEMS', payload: res.data }))
}

同时别忘了在Todos组件的生命周期里触发这个请求，还要把action映射到props中：

class Todos extends Component {
  componentDidMount() {
    this.props.getItems(); // 组件挂载时触发API请求
  }
  
  // ... 其他渲染代码
}

// 把getItems添加到props映射
const mapDispatchToProps = {
  getItems
};

export default connect(mapStateToProps, mapDispatchToProps)(Todos);

3. 优化组件渲染（可选但推荐） #

因为API请求是异步的，在数据返回前可以添加加载提示，同时给列表项加上key属性（React列表渲染的强制要求，避免控制台警告）：

render() {
  const { items } = this.props;
  
  // 数据未返回时显示加载状态
  if (items.length === 0) {
    return <div>正在加载待办事项...</div>;
  }
  
  return (
    <>
      {items.map(todo => (
        <div key={todo.id}>{todo.title}</div>
      ))}
    </>
  );
}

这样修改后，你的组件就能正常渲染API返回的待办事项了！

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