React Redux请求JSONPlaceholder API时posts.map未定义错误排查

你的错误根源有三个，逐个修复即可：

1. 修复Fetch API的响应解析逻辑 #

原生fetch返回的Response对象不能直接读取data属性，必须先调用.json()方法解析JSON响应体。修改action.js中的请求逻辑：

export const fetchPosts=()=>{
  return function (dispatch){
      dispatch(fetchPostStart());
      fetch('https://jsonplaceholder.typicode.com/posts')
      // 新增这一步：解析响应为JSON
      .then((response)=> response.json())
      .then((posts)=>{
          dispatch(fetchPostSuccess(posts));
      }).catch((error)=>{
          dispatch(fetchPostFail(error.message));
      })
  }
}

2. 确保Redux Reducer的初始状态包含空数组 #

检查你的data reducer，初始状态必须给posts设置默认空数组，避免初始渲染时posts为undefined：

// 示例reducer代码
import * as types from './actionType';

const initialState = {
  posts: [], // 必须设为空数组
  loading: false,
  error: null
};

const dataReducer = (state = initialState, action) => {
  switch(action.type) {
    case types.FETCH_POST_START:
      return {...state, loading: true};
    case types.FETCH_POST_SUCCESS:
      return {...state, loading: false, posts: action.payload};
    case types.FETCH_POST_FAIL:
      return {...state, loading: false, error: action.payload};
    default:
      return state;
  }
};

export default dataReducer;

3. 渲染时添加空值防御 #

即使前面两步都修复，也可以通过可选链操作符进一步避免意外报错，修改index.js中的渲染逻辑：

{!loading ? (posts?.map((post) => <Text key={post.id}>{post.title}</Text>)) : (<Text>loading...</Text>)}
// 或者更严谨的写法
{!loading ? (
  Array.isArray(posts) ? posts.map((post) => <Text key={post.id}>{post.title}</Text>) : <Text>No posts found</Text>
) : (<Text>loading...</Text>)}

这样三步修复后，posts.map的报错就会消失，请求数据和渲染的逻辑也会更健壮。

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