React自定义钩子问题：表单组件无法获取更新后的值

你的问题根源很明确：每次调用useCalendar都会创建独立的state实例。CalendarPicker和Form组件各自调用了这个Hook，所以它们的startDate是完全独立的两个状态，CalendarPicker更新的是自己的那一份，Form自然拿不到更新后的值。

下面给你三种可行的解决方案，按需选择：

方案一：用React Context共享状态 #

把日历状态放到全局Context里，让所有需要的组件共享同一个状态实例。

步骤1：创建Context和Provider #

import { createContext, useContext, useState, useEffect } from 'react';

// 创建日历上下文
const CalendarContext = createContext();

// 提供上下文的Provider组件，包裹需要共享状态的组件树
export const CalendarProvider = ({ children }) => {
  const [startDate, setStartDate] = useState("");

  useEffect(() => {
    console.log("startDate 2", startDate);
  }, [startDate]);

  return (
    <CalendarContext.Provider value={{ startDate, setStartDate }}>
      {children}
    </CalendarContext.Provider>
  );
};

// 改造原有的useCalendar Hook，用来消费Context
export const useCalendar = () => {
  const context = useContext(CalendarContext);
  if (!context) {
    throw new Error('useCalendar必须在CalendarProvider内部使用');
  }
  return context;
};

步骤2：修改组件使用方式 #

// CalendarPicker组件不需要改动，直接用改造后的useCalendar
export const CalendarPicker = () => {
  const { startDate, setStartDate } = useCalendar();

  const handleDayPress = (newDateObject) => {
    setStartDate(newDateObject);
  };

  // 你的组件渲染逻辑...
};

// Form组件同样直接使用
export const Form = () => {
  const { startDate } = useCalendar();

  useEffect(() => {
    console.log("startDate", startDate);
  }, [startDate]);

  // 你的组件渲染逻辑...
};

步骤3：在根组件或父组件中包裹Provider #

import { CalendarProvider } from './你的文件路径';

function App() {
  return (
    <CalendarProvider>
      <CalendarPicker />
      <Form />
    </CalendarProvider>
  );
}

方案二：状态提升到父组件（Props传递） #

如果CalendarPicker和Form有共同的父组件，可以把状态提升到父组件，通过props传递给两个子组件。

// 父组件
export const ParentComponent = () => {
  const [startDate, setStartDate] = useState("");

  useEffect(() => {
    console.log("startDate 2", startDate);
  }, [startDate]);

  return (
    <>
      <CalendarPicker startDate={startDate} setStartDate={setStartDate} />
      <Form startDate={startDate} />
    </>
  );
};

// 修改CalendarPicker组件，接收props
export const CalendarPicker = ({ startDate, setStartDate }) => {
  const handleDayPress = (newDateObject) => {
    setStartDate(newDateObject);
  };

  // 你的组件渲染逻辑...
};

// 修改Form组件，接收props
export const Form = ({ startDate }) => {
  useEffect(() => {
    console.log("startDate", startDate);
  }, [startDate]);

  // 你的组件渲染逻辑...
};

方案三：用状态管理库（比如Zustand） #

如果你的应用有很多跨组件共享状态的需求，用专门的状态管理库会更方便。以Zustand为例，用法非常简洁：

安装Zustand #

npm install zustand

创建状态Store #

import { create } from 'zustand';

export const useCalendarStore = create((set) => ({
  startDate: "",
  setStartDate: (newDate) => set({ startDate: newDate }),
}));

组件中使用Store #

export const CalendarPicker = () => {
  const { startDate, setStartDate } = useCalendarStore();

  const handleDayPress = (newDateObject) => {
    setStartDate(newDateObject);
  };

  // 你的组件渲染逻辑...
};

export const Form = () => {
  // 只订阅startDate变化，性能更好
  const startDate = useCalendarStore((state) => state.startDate);

  useEffect(() => {
    console.log("startDate", startDate);
  }, [startDate]);

  // 你的组件渲染逻辑...
};

方案选择建议 #

• 只有少数组件共享状态：用Context或Props提升就够了
• 应用复杂、多组件需要共享状态：优先选Zustand这类轻量状态库

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