React组件question prop为undefined报错的原因及修复方法

根本原因 #

报错由Prop传参名和接收名不匹配直接导致：

• 中间层组件Questions.js遍历渲染最终子组件Question时，仅传入了key、name两个属性，从未传递名为question的Prop
• 最终子组件Question.js中解构声明要接收questionProp，实际拿到的值为undefined，执行question.name读取操作时就会触发类型错误

修复方式 #

两种修改方式任选其一即可解决问题：

方式一：修改父组件传参，传入完整question对象 #

调整Questions.js的子组件渲染逻辑，把遍历得到的整个question对象作为Prop传给子组件：

// Questions.js 对应修改部分
questions.map(question => {
  return <Question key={question.id} question={question} />
})

修改完成后，Question.js原有代码无需任何改动，即可正常读取question.name完成渲染。

方式二：修改子组件接收逻辑，直接对接已传入的name属性 #

如果子组件只需要展示问题名称，不需要访问question对象的其他字段，可以直接修改Question.js的Prop接收规则，读取父组件已经传入的name属性：

// Question.js 完整修改后代码
import React from 'react'

export default function Question({ name }) {
    return (
        <div>
            {name}
        </div>
    )
}

修改后Questions.js原有传参逻辑无需调整，页面可正常渲染。

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