使用React Context时useState钩子失效，注册表单数据异常

核心问题 #

你的代码存在两个关键错误，导致Context管理用户数据的功能失效：

1. 重复使用同一Context的Provider：App.js中连续嵌套了两个StepperContext.Provider，完全未使用PagesContext.Provider传递用户数据info和setInfo。这使得Form组件通过useContext(PagesContext)获取到的是Context的默认空值，其中的setInfo是无效空函数，无法更新状态。
2. 路由与上下文的嵌套顺序不合理：BrowserRouter被包裹在Context Provider内部，虽不直接报错，但不符合常规写法，可能引发上下文作用域问题。

修复步骤 #

1. 修正App.js中的Context Provider结构 #

替换重复的StepperContext.Provider为PagesContext.Provider，并调整嵌套顺序，确保路由组件能同时获取两个Context：

// 修改后的App.js代码
import "./App.css";
import * as React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Question from "./Question";
import Form from "./Form";
import Language from "./Language";
import Photo from "./Photo";
import Fin from "./Fin";
import CustomizedSteppers from "./Step";
import { createContext, useMemo, useState, useEffect } from "react";
export const StepperContext = createContext({ step: 0, setStep: () => {} });
export const PagesContext = createContext({ info: {}, setInfo: () => {} });

function App() {
  const [info, setInfo] = useState({});
  const pagesContextVal = useMemo(() => ({ info, setInfo }), [info]);
  const [step, setStep] = useState(0);
  const stepperContextVal = useMemo(() => ({ step, setStep }), [step]);

  // 自动同步info到localStorage
  useEffect(() => {
    localStorage.setItem("info", JSON.stringify(info));
  }, [info]);

  return (
    <div className="App">
      <BrowserRouter>
        <PagesContext.Provider value={pagesContextVal}>
          <StepperContext.Provider value={stepperContextVal}>
            <CustomizedSteppers>
              <Routes>
                <Route path="/" index element={<Form />} />
                <Route path="Question" element={<Question />} />
                <Route path="Language" element={<Language />} />
                <Route path="Photo" element={<Photo />} />
                <Route path="Finish" element={<Fin />} />
              </Routes>
            </CustomizedSteppers>
          </StepperContext.Provider>
        </PagesContext.Provider>
      </BrowserRouter>
    </div>
  );
}

export default App;

2. 优化Form组件的输入框取值逻辑 #

由于info初始值就是空对象，无需额外判断，可简化输入框的value属性：

// Form组件中输入框的value可简化为：
value={info.firstName || ""}
// 替代原代码中的 value={info ? info.firstName : ""}

3. 移除Form组件中的冗余localStorage操作 #

App.js中已通过useEffect自动同步info到localStorage，可删除Form组件next函数中的手动保存代码：

// 修改后的next函数
const next = () => {
  setStep(1);
  navigate("Question");
};

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