React Hooks跨模态传值报错：嵌套模态框无法获取Task变量

嘿，我来帮你搞定这个ReferenceError: Can't find variable: task的问题！核心原因很简单：React组件的状态是局部私有的，你在Modal1里定义的task状态，Modal2默认是访问不到的，必须通过props把它传递过去才行。咱们一步步修改代码：

第一步：把Modal1的task传递给Modal2 #

在Modal1组件里，你需要把task作为props传给Modal2，同时还要把App.js里的addList方法也传进去（因为Modal2要调用它来创建Todo）。修改Modal1里的Modal2调用部分：

// Modal1组件里的Modal渲染部分
<Modal animationType='slide' visible={showModal2} onRequestClose={toggleShowModal2}>
  {/* 新增task、addList和resetTask的props传递 */}
  <Modal2 
    closeModal={toggleShowModal2} 
    task={task} 
    addList={props.addList}
    resetTask={() => setTask('')} // 让Modal2可以通知Modal1清空task
  />
</Modal>

第二步：修改Modal2组件，接收并使用传递过来的props #

现在Modal2能拿到task了，还要修正createTodo函数里的错误（原来的setTask在Modal2里不存在，要让Modal1去重置）：

// Modal2组件的createTodo函数修改
function createTodo(){
  // 从props里拿到task，而不是直接用未定义的task变量
  const list = {task: props.task, time};
  props.resetTask(); // 通知Modal1清空task状态
  setTime(''); // 清空Modal2自己的time状态
  props.addList(list); // 调用App.js的addList方法添加Todo
  props.closeModal(); // 关闭模态框
}

如果你想让代码更清晰，可以把Modal2的函数参数改成解构形式：

// 解构props，直接拿到需要的变量
function Modal2({ closeModal, task, addList, resetTask }) {
  const [time, setTime] = useState('')
  
  function handleTime(value) {
    setTime(value)
  }

  function createTodo(){
    const list = {task, time};
    resetTask();
    setTime('');
    addList(list);
    closeModal();
  }

  // ... 剩下的渲染代码不变
}

第三步：确认App.js的传递逻辑 #

别忘了，App.js里需要把addList方法传递给Modal1，这样Modal2才能通过props链调用它：

// App.js里的Modal1调用示例
<Modal1 
  closeModal={() => setShowModal1(false)} 
  addList={addList} // 把App的addList方法传进Modal1
/>

为什么原来的代码会报错？ #

你在Modal1里把task传给了toggleShowModal2函数，但这个函数只是用来切换Modal2的显示状态，并没有把task传递给Modal2组件实例。React组件之间的状态传递必须通过props，直接跨组件访问其他组件的局部状态是不允许的，这也是React组件封装性的体现。

这样修改后，你的嵌套模态框就能正确传递task和time状态，顺利创建Todo项啦！

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