向React全局状态添加项目不生效，如何用Context API实现并渲染传参？

1. Context与全局状态定义 #

首先封装Context层，全局状态和操作方法统一在Provider中维护，注意更新数组时必须返回新引用，不能直接修改原数组，这是新增项目不生效的核心原因。

// BoxContext.js
import { createContext, useContext, useState } from 'react';

const BoxContext = createContext();

export function BoxProvider({ children }) {
  // 全局存储项目列表，每个项目自带唯一id
  const [boxList, setBoxList] = useState([
    { id: 1, content: '默认项目1' },
    { id: 2, content: '默认项目2' }
  ]);

  // 新增项目方法
  const addBoxItem = (newItemContent) => {
    const newItem = {
      // 简单场景用时间戳生成唯一id，复杂场景建议引入uuid库
      id: Date.now(),
      content: newItemContent
    };
    // 必须生成新数组更新状态，禁止直接push原数组后set值
    setBoxList(prev => [...prev, newItem]);
  };

  return (
    <BoxContext.Provider value={{ boxList, addBoxItem }}>
      {children}
    </BoxContext.Provider>
  );
}

// 封装自定义hook简化调用
export function useBoxContext() {
  return useContext(BoxContext);
}

2. 全局注入Provider #

在项目入口文件用Provider包裹根组件，保证所有子组件都能访问到全局状态。

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BoxProvider } from './BoxContext';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BoxProvider>
    <App />
  </BoxProvider>
);

3. 新增项目功能实现 #

任意业务组件都可以调用Context中的addBoxItem方法完成全局新增。

// AddBox.jsx
import { useBoxContext } from './BoxContext';

export default function AddBox() {
  const { addBoxItem } = useBoxContext();
  return <button onClick={() => addBoxItem('新增的项目内容')}>添加项目</button>;
}

4. map渲染列表并传入id参数 #

直接读取全局的boxList数组遍历渲染，绑定唯一id作为key，同时将id传递给子项组件。

// BoxContainer.jsx
import { useBoxContext } from './BoxContext';
import BoxItem from './BoxItem';

export default function BoxContainer() {
  const { boxList } = useBoxContext();
  return (
    <div className="box-list">
      {boxList.map(item => (
        <BoxItem 
          key={item.id}
          id={item.id}
          content={item.content}
        />
      ))}
    </div>
  );
}

// BoxItem.jsx 接收id参数
export default function BoxItem({ id, content }) {
  return <div>项目ID：{id}，内容：{content}</div>;
}

注意：如果更新状态时直接修改原数组（比如boxList.push(newItem)后调用setBoxList(boxList)），React无法检测到数组引用变化，不会触发组件重渲染，就会出现新增项目不生效的问题。

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