React使用useState传递数组props时调用map报错问题

React函数组件的第一个入参是封装了所有传入属性的props对象，你在FeedbackList中直接将入参命名为feedback时，拿到的实际是结构为{ feedback: 传入的数组 }的对象，而非数组本身，因此调用.map()会触发类型错误。该问题和useState等hooks的使用没有关系。

直接在接收props时解构出目标feedback属性即可，这是React函数组件的标准写法：

import FeedbackItem from "./FeedbackItem"
// 直接解构入参拿到feedback属性
function FeedbackList({ feedback }) {
  return (
    <div>
      {feedback.map((item) => (
        <FeedbackItem key={item.id} item={item} />
      ))}
    </div>
  )
}
// 补上原代码遗漏的组件导出
export default FeedbackList

你也可以选择接收完整props对象，再通过属性访问的方式取值：

import FeedbackItem from "./FeedbackItem"
function FeedbackList(props) {
  return (
    <div>
      {props.feedback.map((item) => (
        <FeedbackItem key={item.id} item={item} />
      ))}
    </div>
  )
}
export default FeedbackList

• 原FeedbackList组件代码末尾遗漏了export default FeedbackList导出语句，不补上会直接引发组件引入错误
• 子组件中重复引入的FeedbackData属于冗余代码，该数据已经通过父组件props传入，无需额外引入
• 父组件App.js中useState的写法完全符合规范，不需要调整

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