React中兄弟组件间多输入状态管理的最优方案探讨

对于你这种兄弟组件共享状态、且有大量输入项的场景，最简便且易维护的方案是状态提升到父组件App，同时用单个对象状态管理所有输入字段（避免20个单独的useState导致代码臃肿）。

步骤1：合并App组件的状态为单个对象 #

把分散的fullName、address等字段合并到一个formData对象中，用单个useState管理：

import { useState } from 'react';

function App() {
  // 初始化所有需要的字段，后续新增字段直接在这里添加
  const [formData, setFormData] = useState({
    fullName: "",
    address: ""
    // 其他20+字段依次添加，比如 email: "", phone: "" 等
  });

  return (
    <div className='app'>
      {/* 把状态和更新函数传给SideMenu */}
      <SideMenu formData={formData} setFormData={setFormData} />
      {/* 把状态传给Document用于展示 */}
      <Document formData={formData} />
    </div>
  );
}
export default App;

步骤2：改造SideMenu（你的代码里命名为SideBar，统一为SideMenu）组件 #

给每个input添加name属性（对应formData里的字段名），并绑定通用的onChange函数，一个函数就能处理所有输入项的更新：

const SideMenu = ({ formData, setFormData }) => {
  // 通用输入处理函数
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
      ...prev, // 保留原有字段的值
      [name]: value // 更新当前输入的字段
    }));
  };

  return (
    <div>
      <div className='input-group'>
        <label>Full Name:</label>
        <input 
          type='text' 
          name="fullName" // 对应formData的字段名
          value={formData.fullName} // 绑定状态值，实现受控组件
          onChange={handleInputChange}
        />
      </div>
      <div className='input-group'>
        <label>Address:</label>
        <input 
          type='text' 
          name="address"
          value={formData.address}
          onChange={handleInputChange}
        />
      </div>
      {/* 后续新增的20+输入项，复制这个结构修改name和label即可 */}
    </div>
  );
};

步骤3：改造Document组件接收props并展示数据 #

从props中获取formData，取出对应字段展示：

const Document = ({ formData }) => {
  return (
    <div>
      <h1>{formData.fullName}</h1>
      <p>{formData.address}</p>
      {/* 其他字段同样通过formData.xxx展示 */}
    </div>
  );
};

方案优势 #

• 符合React单向数据流原则，状态集中在父组件，子组件仅负责渲染和触发更新，逻辑清晰。
• 单个对象管理多字段，避免大量重复的useState声明，新增字段只需在初始化对象中添加，维护成本低。
• 无需引入额外状态管理库，新手学习成本低，上手快。

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