在React.js中，将reducer的 dispatch函数传递给子组件并在子组件中调用时遇到问题

前端开发 2026-07-08

我遇到了一个我确信非常简单的问题，但至今还没能解决。我有一个父组件和一个子组件，我正在尝试把父组件中创建的dispatch传给子组件，在输入改变时让子组件能够触发，但就我当前的代码而言，系统提示dispatch无法被解构，因为它是未定义的（具体是，"Cannot destructure property 'dispatch' of 'undefined' as it is undefined."）。有人知道我在这里到底哪里做错了吗？

父组件：

import Homepage from './Homepage.js';
import BookingPage from "./BookingPage.js";
import { Route, Routes } from 'react-router-dom';
import { useState, useReducer } from "react";

const initialTimes = {
  availableTimes: ['17:00','18:00','19:00','20:00','21:00','23:00'],
}

const reducer = (state, action) => {
  console.log("dispatch triggered")
  console.log(state.availableTimes);
  switch(action.type){
    case "change_date":
      return {availableTimes: ['00:00']};
    default:
      return state;
  }
};

function Main() {
    const [state, dispatch] = useReducer(reducer, initialTimes);

    return (
      <main>
        <Routes>
          <Route path="/" element={<Homepage/>} />
          <Route path="/booking" element={<BookingPage availableTimes={state.availableTimes} dispatch={dispatch}/>} />
        </Routes>
      </main>
    );
}

export default Main;

子组件：

 function BookingForm (availableTimes, {dispatch}) {
    return(
        <input type="date" onChange={() => dispatch({type:'change_date'})} />
    )
 }

 export default BookingForm;

有任何帮助都将不胜感激。谢谢！

解决方案

解决方案来自InDevX的评论。

你只需要把availableTimes和 dispatch一起从那个第一个参数中解构出来。把它们都放在同一组花括号里：BookingForm({ availableTimes, dispatch })

注意到你的父组件正在把路由引导到 <BookingPage /> 并在那里传递属性，但你提供的子组件片段命名为BookingForm。如果BookingPage是 BookingForm的包装器，请确保BookingPage能成功接收这些属性并向下传递，大概像 function BookingPage({ availableTimes, dispatch }) { return (<BookingForm availableTimes={availableTimes} dispatch={dispatch} />)};

React