如何在实例化React Provider的父组件中获取其内部状态？

组件必须在Context Provider的子树内，才能通过useContext获取到Context的值。你的CourseModeDetails是渲染CourseProvider的父组件，它本身不在CourseProvider的包裹范围内，所以调用useCourse拿不到内部的course状态，自然一直返回null。

方案1：拆分使用状态的部分为子组件 #

把CourseModeDetails里需要访问course状态的JSX，单独拆成一个子组件，让这个子组件被CourseProvider包裹，就能正常使用useCourse了。

代码示例：

// 新建子组件，负责渲染需要course状态的内容
function CourseModeContent({ closeCourseDetails }) {
  const course = useCourse();
  
  return (
    <section>
      <h1 className="centered">{course.shortName}</h1>
      <div className="mode-page-btn-container">
          <button 
              className="dialog-primary-btn"
              type="button" 
              onClick={()=>closeCourseDetails(course)}>
              <FontAwesomeIcon icon="save"/>&nbsp;Save Changes 
          </button>
      </div>
      {/* 其他渲染内容 */}
    </section>
  );
}

// 修改原CourseModeDetails组件
export default function CourseModeDetails({currentCourse, closeCourseDetails}) {
  return(
    <CourseProvider initialCourse={currentCourse}>
      <CourseModeContent closeCourseDetails={closeCourseDetails} />
    </CourseProvider>
  );
}

方案2：给CourseProvider添加回调同步状态到父组件 #

如果不想拆分组件，可以给CourseProvider增加一个onChange回调，让内部的course状态变化时主动通知父组件，同步父组件的本地状态。

代码示例：

// 修改CourseProvider组件
export function CourseProvider ({children, initialCourse, onChange})  {
    const [course, dispatch] = useReducer(courseChangeReducer, initialCourse);
    
    // 当course更新时触发回调，同步给父组件
    useEffect(() => {
      onChange?.(course);
    }, [course, onChange]);

    return (
        <CourseContext.Provider value={course}>
            <CourseDispatchContext.Provider value={dispatch}>
                {children}
            </CourseDispatchContext.Provider>
        </CourseContext.Provider>
    );
}

// 修改CourseModeDetails组件
export default function CourseModeDetails({currentCourse, closeCourseDetails}) {
  const [localCourse, setLocalCourse] = useState(currentCourse);
  
  return(
    <CourseProvider 
      initialCourse={currentCourse}
      onChange={setLocalCourse} // 同步内部状态到父组件
    >
      <section>
        <h1 className="centered">{localCourse.shortName}</h1>
        <div className="mode-page-btn-container">
            <button 
                className="dialog-primary-btn"
                type="button" 
                onClick={()=>closeCourseDetails(localCourse)}>
                <FontAwesomeIcon icon="save"/>&nbsp;Save Changes 
            </button>
        </div>
        {/* 其他渲染内容 */}
      </section> 
    </CourseProvider>
  );
}

方案3：调整组件层级，让CourseModeDetails成为Provider的子组件 #

如果组件结构允许，把CourseProvider的层级上移，让CourseModeDetails成为它的子组件，这样就能直接使用useCourse获取状态。

代码示例：

// 在CourseModeDetails的父组件中渲染Provider
function ParentComponent() {
  const [currentCourse, setCurrentCourse] = useState(/* 初始值 */);
  
  return (
    <CourseProvider initialCourse={currentCourse}>
      <CourseModeDetails 
        closeCourseDetails={(updatedCourse) => setCurrentCourse(updatedCourse)} 
      />
    </CourseProvider>
  );
}

// 修改CourseModeDetails组件
export default function CourseModeDetails({ closeCourseDetails }) {
  const course = useCourse(); // 现在能正常获取最新状态了
  
  return(
    <section>
      <h1 className="centered">{course.shortName}</h1>
      <div className="mode-page-btn-container">
          <button 
              className="dialog-primary-btn"
              type="button" 
              onClick={()=>closeCourseDetails(course)}>
              <FontAwesomeIcon icon="save"/>&nbsp;Save Changes 
          </button>
      </div>
      {/* 其他渲染内容 */}
    </section> 
  );
}

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