React跨组件状态传递问题：无法在另一组件渲染列表

问题说明 #

根组件App.js中嵌入了DescriptionSector和FinancialResume两个子组件：

• DescriptionSector内部用useState维护一个数组，点击按钮添加元素的功能本身正常
• FinancialResume需要渲染前者维护的数组，但无法实现；尝试直接调用FinancialResume(title)传递参数的方式无效

错误原因 #

1. 状态被局限在DescriptionSector内部，兄弟组件FinancialResume无法直接访问该状态
2. 直接调用组件函数（FinancialResume(title)）不是React的正确渲染方式，组件必须通过JSX标签声明并通过props传递数据

修正方案：状态提升到父组件 #

把数组状态移到父组件App.js中，再通过props分别传递给两个子组件：一个负责更新状态，一个负责渲染状态。

修正后的代码示例 #

1. App.js（根组件）

import { useState } from "react";
import DescriptionSector from "./Components/descriptionSector/description";
import FinancialResume from "./Components/financialresume/financialresume";

function App() {
  // 将状态提升到父组件
  const [title, setTitle] = useState([]);

  return (
    <div className="App">
      <div className="user-body__leftSector">
        {/* 把状态更新函数传递给DescriptionSector */}
        <DescriptionSector title={title} setTitle={setTitle} />
      </div>

      <div className="user-body__rightSector">
        {/* 把状态传递给FinancialResume用于渲染 */}
        <FinancialResume title={title} />
      </div>
    </div>
  );
}
            
export default App;

2. DescriptionSector组件

// 接收父组件传递的title和setTitle作为props
function DescriptionSector({ title, setTitle }) {
  return (
    <button 
      onClick={() => setTitle([...title, "New title defined"])}
    >
      add word
    </button>
  );
}

export default DescriptionSector;

3. FinancialResume组件（补充key属性避免警告）

function FinancialResume({ title }) {
  return (
    <ul>
      {title.map((e, index) => (
        {/* 添加key属性，帮助React识别列表项变化 */}
        <li key={index}>{e}</li>
      ))}
    </ul>
  );
}

export default FinancialResume;

补充说明 #

• 给map渲染的列表项添加key属性是React的强制要求，实际项目中建议使用数据的唯一ID替代index，避免列表顺序变化时出现渲染异常
• 状态提升是React中解决兄弟组件数据共享的标准方案，当多个组件需要访问或修改同一状态时，将状态放在它们的共同父组件中是最合理的处理方式

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