如何修复父组件传递给子组件的props状态为undefined的问题？

核心问题 #

1. 父组件存在未定义变量：父组件中<div className='player-wrapper' key={key}>的key变量未声明，这会导致React渲染流程异常，可能引发首次渲染时props传递失败，出现useState(openModal)初始化时为undefined的情况。
2. useState初始值仅生效一次：子组件中useState(openModal)的初始值只会在组件首次挂载时读取，后续父组件更新openModal的props，子组件的modalState不会自动同步，这也是你看到console.log(openModal)有值但state没更新的原因。

解决方案 #

方案一：由父组件统一管理模态框状态（推荐）

模态框的显示/隐藏状态应该由触发它的父组件控制，子组件只负责渲染和触发关闭事件，这样状态更统一，避免不一致。

修改后的父组件：

function Parent() {
  const [openModal, setOpenModal] = useState('close-modal')

  const revealStats = (e) => {
    e.preventDefault();
    setOpenModal('open-modal')
  };

  // 新增关闭模态框的方法，传递给子组件
  const closeModal = (e) => {
    e.preventDefault();
    setOpenModal('close-modal')
  }

  return (
    <>
      {/* 移除未定义的key，或替换为合法的key值（如列表渲染时用item的唯一标识） */}
      <div className='player-wrapper' onClick={revealStats}>
        <ModalClubPages openModal={openModal} closeModal={closeModal}/>
      </div>
    </>
  );
}

export default Parent;

修改后的子组件：

function ModalClubPages({openModal, closeModal}) {
  // 不再需要自己维护state，直接使用父组件传递的props
  return (
    <div id={openModal}>
      <button id="close" onClick={closeModal}> X </button>
    </div>
  )
}

export default ModalClubPages

方案二：子组件维护独立state并同步props

如果确实需要子组件自己管理state，需要通过useEffect监听props的变化，同步更新state：

修改后的子组件：

import { useState, useEffect } from 'react';

function ModalClubPages({openModal}) {
    const [modalState,setModalState] = useState(openModal)

    // 监听openModal props的变化，同步更新子组件state
    useEffect(() => {
      setModalState(openModal);
    }, [openModal])

    const closeModal = (e) =>{
        e.preventDefault();
        setModalState('close-modal')
        // 若需要通知父组件状态变化，可在此调用父组件传入的回调
        // props.onModalClose();
    }

  return (
    <div id={modalState}>
        <button id="close" onClick={closeModal}> X </button>
    </div>
  )
}

export default ModalClubPages

同时记得修复父组件中未定义的key问题，避免渲染异常。

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