ReactJS中Props未传递给子组件：open属性未定义报错求助

嘿，这个报错的原因其实很清晰，咱们一步步捋：

问题根源 #

你父组件里的this.state.openModal是个布尔值（初始是false），然后把它作为openModal属性传给了子组件。但子组件里却写了const { open } = this.props.openModal;——布尔值根本没有open这个属性啊！这就导致解构出来的open是undefined，刚好Modal组件要求open是必填prop，所以就触发警告了。

两种修复方案 #

方案1：调整state结构（适合需要传对象的场景）

如果你确实需要通过对象传递状态，那把父组件的state改成包含open属性的对象：

// 父组件state定义
state = {
  openModal: { open: false }
}

这样子组件里的解构const { open } = this.props.openModal;就能正确拿到false，传给Modal的open={open}就没问题了。

方案2：直接传递布尔值（更推荐，适合单纯的开关场景）

如果只是需要一个开关控制Modal显示，完全不用绕对象，直接传布尔值更简单：

// 父组件传参给子组件
<ChildComponent open={this.state.openModal} />

然后子组件里直接取这个prop：

// 子组件里获取
const { open } = this.props;
// 或者直接写 const open = this.props.open;

再把open={open}传给Modal组件，这样就完全符合要求了。

小提醒 #

要是你用的是函数式组件，只是获取props的方式变成从参数里拿，但核心问题还是传值和解构不匹配，按照上面的思路调整就行~

内容的提问来源于stack exchange，提问作者Eshan I.