React父组件设置dltId状态传递给子组件时出现未定义问题

核心问题 #

你的代码存在两个关键问题导致dltId在子组件中打印为undefined：

1. 模态框初始就处于显示状态（dispModal = true是普通变量而非状态，且值固定为true），此时dltId还未被赋值，直接点击模态框的删除按钮自然会输出undefined。
2. 未通过状态控制模态框的显示时机，导致模态框无法在dltId赋值后才渲染。

修复后的代码 #

父组件（Videocard） #

const Videocard = ({ videoData }) => {
  const [dltId, setdltId] = useState(null);
  // 用状态控制模态框显示/隐藏，初始隐藏
  const [showModal, setShowModal] = useState(false);

  function handleDeleteNoteFunc(videoId) {
    // 点击删除按钮时，先赋值dltId，再打开模态框
    setdltId(videoId);
    setShowModal(true);
  }

  return (
    <>
      {videoData.map((item) => {
        // 给循环元素添加唯一key，符合React规范
        return (
          <button
            key={item.id}
            className="notesBox"
            onClick={() => handleDeleteNoteFunc(item.id)}
          >
            Delete
          </button>
        );
      })}
      {/* 只有showModal为true时才渲染模态框，此时dltId已赋值 */}
      {showModal && <DeleteModal dltId={dltId} onClose={() => setShowModal(false)} />}
    </>
  );
};

子组件（DeleteModal） #

const DeleteModal = ({ dltId, onClose }) => {
  function handlClickFunc(e) {
    e.preventDefault();
    console.log(dltId); // 现在会正确输出对应项的id
    // 执行删除逻辑后，关闭模态框
    onClose();
  }

  return (
    <div className="modal">
      <p>确定要删除ID为{dltId}的项吗？</p>
      <button
        type="submit"
        value="Submit"
        onClick={(e) => handlClickFunc(e)}
      >
        Delete Note as well !
      </button>
      {/* 可选：添加关闭按钮 */}
      <button onClick={onClose}>Cancel</button>
    </div>
  );
};

关键修改点 #

• 将模态框的显示状态改为useState管理，初始隐藏，只有点击删除按钮时才打开，确保此时dltId已经被赋值。
• 给map循环的按钮添加key属性，避免React渲染警告。
• 给子组件添加onClose回调，用于删除完成后关闭模态框，提升交互体验。

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