React父组件向模态框传props 子组件解构后返回undefined问题

核心错误：props命名不匹配 #

父组件给LandingPageModal传递的属性名是show，但子组件解构参数时取的是showModal，两个名称不一致，自然无法拿到正确值，返回结果为undefined。

修复方案 #

二选一即可：

• 修改父组件传参名称，将调用代码改为：

<LandingPageModal showModal={showModal} />

• 修改子组件解构的属性名，将参数部分改为：

const LandingPageModal = ({ show }) => {
  const [isModalOpen, setIsModalOpen] = useState(show)
  console.log('Is Show: ' + show)
  // 其余代码保持不变
}

额外优化建议 #

当前子组件把props值存在内部state的写法存在潜在问题：useState的初始值仅在组件第一次渲染时生效，如果后续父组件的showModal状态发生变化，子组件的isModalOpen不会同步更新。
如果需要响应父组件的状态变化，可以新增useEffect同步状态：

// 依赖项对应你实际使用的props名即可
useEffect(() => {
  setIsModalOpen(showModal)
}, [showModal])

如果模态框的显隐完全由父组件控制，也可以直接用props的值，不需要额外存一份内部state：

// 去掉内部的isModalOpen state，直接绑定props即可
<ReactModal
  isOpen={showModal}
>

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