React传递数组Props报错类型不匹配，PropTypes定义问题求助

嘿，我一眼就揪出问题所在啦！你的代码有两个关键小错误，才导致了这个PropTypes警告：

1. Reducer里的数组嵌套bug #

先看你Reducer中GET_ALL_ARTICLES_PAGE的处理逻辑：

return { ...state, articles_list: [...state.articles_list, action.payload], };

如果action.payload本身就是一个文章数组（比如后端返回的[article1, article2]），这段代码会把整个payload数组当成单个元素塞进articles_list里，最终articles_list会变成嵌套数组（比如[[article1, article2]]），完全不是你想要的扁平数组结构。

修正方案： #

把action.payload展开后再添加，这样就能把payload里的每一篇文章都单独加入数组：

case GET_ALL_ARTICLES_PAGE:
  return { 
    ...state, 
    articles_list: [...state.articles_list, ...action.payload], 
  };

2. PropTypes的类型定义用错了API #

你用PropTypes.shape([])来定义数组类型，这完全搞错了用法！PropTypes.shape()是用来定义对象的结构（比如指定对象的键和对应类型），数组类型得用专门的API：

• 基础数组校验：PropTypes.array
• 带元素类型的严格校验：PropTypes.arrayOf(...)（推荐用这个，能避免更多隐性bug）

修正方案： #

根据你的需求选一种：

// 基础版：仅校验是数组
Content.propTypes = {
  articles_list: PropTypes.array,
};

// 严格版：校验数组中的每个元素是符合结构的文章对象（根据你的实际文章属性调整）
Content.propTypes = {
  articles_list: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      title: PropTypes.string.isRequired,
      content: PropTypes.string,
      // 其他你需要的文章属性
    })
  ),
};

为什么之前没加ESLint时没报错？ #

因为没有PropTypes的类型校验，即使articles_list变成了嵌套数组，控制台不会主动提示，但其实你的组件渲染逻辑可能已经有问题了（比如articles_list.map(item => ...)的时候，item是数组而不是单个文章），只是你没察觉到。加上ESLint和PropTypes后，校验机制发现了数据结构的不匹配，才抛出了警告。

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