React复用同一Side组件多次，Context传值仅保留最后一项如何解决？

核心原因 #

全局状态仅保留最后一次提交值的核心原因是状态更新时没有按每个Side组件的唯一标识区分存储，每次更新直接覆盖了整个状态对象/数组。

实现方案 #

1. 定义结构化全局状态与更新方法

在Context中初始化长度为4的数组，每个下标对应一个Side组件的存储位，同时暴露按索引更新的方法：

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

const SideContext = createContext();

export function SideProvider({ children }) {
  // 数组下标对应第N个Side，每个元素存储对应Side的两个输入值，默认可自定义
  const [allSideValues, setAllSideValues] = useState(Array(4).fill([0, 0]));

  const updateSideValue = (sideIndex, newValues) => {
    setAllSideValues(prev => {
      const newArr = [...prev];
      // 仅更新对应下标的Side数据，其余数据保留
      newArr[sideIndex] = newValues;
      return newArr;
    });
  };

  return (
    <SideContext.Provider value={{ allSideValues, updateSideValue }}>
      {children}
    </SideContext.Provider>
  );
}

export function useSideContext() {
  return useContext(SideContext);
}

2. 渲染时传入Side的索引标识

父组件遍历渲染Side时，将当前遍历的索引作为唯一标识传入组件：

{[...Array(4)].map((_, index) =>
  <Side 
    key={index}
    sideIndex={index}
    Style='wall-holder' 
    InputClass='input-height' 
  />
)}

3. Side组件内部同步数据到全局

每个Side组件输入值变化时，调用全局更新方法，传入自身索引和当前输入值：

function Side({ sideIndex, Style, InputClass }) {
  const { updateSideValue } = useSideContext();
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(0);

  const syncToGlobal = () => {
    updateSideValue(sideIndex, [Number(input1), Number(input2)]);
  };

  return (
    <div className={Style}>
      <input 
        className={InputClass} 
        type="number"
        value={input1} 
        onChange={e => {
          setInput1(e.target.value);
          syncToGlobal();
        }}
      />
      <input 
        className={InputClass} 
        type="number"
        value={input2} 
        onChange={e => {
          setInput2(e.target.value);
          syncToGlobal();
        }}
      />
    </div>
  )
}

4. 汇总数据使用

任意组件可通过Context拿到所有Side的输入值，直接做求和等处理：

const { allSideValues } = useSideContext();
// 所有输入值求和示例
const total = allSideValues.reduce((sum, [val1, val2]) => sum + val1 + val2, 0);

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