如何将BasicForm组件的stateRegister状态传递至Review组件？

1. 基础方案：Props传递（父子/近层级组件场景） #

这是最直接的实现方式，适用于BasicForm直接渲染Review，或两者共享父组件的场景：

步骤1：在BasicForm中传递状态给Review #

修改BasicForm.js的返回部分，将stateRegister作为props传入Review组件：

const BasicForm = () => {
  const [stateRegister, setStateRegister] = useState({
    username: '',
    email: '',
    password: '',
  })

  function handleChange(e) {
    const value = e.target.value
    setStateRegister({
      ...stateRegister,
      [e.target.name]: value,
    })
  }

  return (
    <div>
      {/* 表单输入元素示例 */}
      <input
        type="text"
        name="username"
        value={stateRegister.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={stateRegister.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={stateRegister.password}
        onChange={handleChange}
      />
      {/* 传递stateRegister到Review */}
      <Review userData={stateRegister} />
    </div>
  )
}

步骤2：在Review中接收并使用状态 #

修改Review.js，通过props接收状态并使用：

export default function Review({ userData }) {
    return (
      <div>
        <h3>注册信息预览</h3>
        <p>用户名：{userData.username}</p>
        <p>邮箱：{userData.email}</p>
        <p>密码：{userData.password}</p>
      </div>
    )
}

2. 进阶方案：Context API（跨层级/兄弟组件场景） #

如果BasicForm和Review层级较深，或是无直接关联的兄弟组件，用Context API可以避免props层层传递：

步骤1：创建Context文件 #

新建AuthContext.js：

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

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [stateRegister, setStateRegister] = useState({
    username: '',
    email: '',
    password: '',
  });

  return (
    <AuthContext.Provider value={{ stateRegister, setStateRegister }}>
      {children}
    </AuthContext.Provider>
  );
}

// 自定义Hook简化调用
export function useAuth() {
  return useContext(AuthContext);
}

步骤2：用Provider包裹根组件 #

在根组件（如App.js）中包裹需要共享状态的组件：

import { AuthProvider } from './AuthContext';
import BasicForm from './BasicForm';
import Review from './Review';

function App() {
  return (
    <AuthProvider>
      <BasicForm />
      <Review />
    </AuthProvider>
  );
}

export default App;

步骤3：在BasicForm中更新Context状态 #

修改BasicForm.js，通过自定义Hook获取状态更新方法：

import { useAuth } from './AuthContext';

const BasicForm = () => {
  const { stateRegister, setStateRegister } = useAuth();

  function handleChange(e) {
    const value = e.target.value;
    setStateRegister({
      ...stateRegister,
      [e.target.name]: value,
    });
  }

  return (
    <div>
      <input
        type="text"
        name="username"
        value={stateRegister.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={stateRegister.email}
        onChange={handleChange}
      />
      <input
        type="password"
        name="password"
        value={stateRegister.password}
        onChange={handleChange}
      />
    </div>
  );
};

export default BasicForm;

步骤4：在Review中获取Context状态 #

修改Review.js，通过自定义Hook获取状态：

import { useAuth } from './AuthContext';

export default function Review() {
  const { stateRegister } = useAuth();

  return (
    <div>
      <h3>注册信息预览</h3>
      <p>用户名：{stateRegister.username}</p>
      <p>邮箱：{stateRegister.email}</p>
      <p>密码：{stateRegister.password}</p>
    </div>
  );
}

补充提示 #

• 若项目已使用Redux、Zustand等状态管理库，也可将stateRegister存入全局状态，再在Review组件中取出使用，逻辑和Context类似。
• 原代码中console.log(stateRegister)会打印旧值，因为setState是异步操作，如需查看更新后的状态，可通过useEffect监听stateRegister变化实现。

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