React如何处理数量不确定的元素独立显示状态？

当需要控制数量不确定的元素的单独状态时，不要为每个元素声明独立的useState，而是用一个状态对象（优先推荐，基于元素唯一标识）或状态数组（基于索引）来统一管理所有元素的显示状态。

方法一：基于元素唯一标识的状态对象（推荐） #

假设你的uncertainArray中的每个元素都有唯一的id属性（后端返回或前端生成），可以用这个id作为状态对象的键：

function MyComponent() {
  const uncertainArray = []; // 示例元素结构：{ id: 1, name: "元素1" }
  // 初始化状态：默认所有元素都显示
  const [showStates, setShowStates] = useState(() => {
    return uncertainArray.reduce((acc, item) => {
      acc[item.id] = true;
      return acc;
    }, {});
  });

  // 点击事件：切换对应id元素的显示状态
  const clickEvent = (itemId) => {
    setShowStates(prevState => ({
      ...prevState,
      [itemId]: !prevState[itemId]
    }));
  };

  return (
    <>
      {uncertainArray.map(element => (
        <div 
          key={element.id}
          style={{ display: showStates[element.id] ? "block" : "none" }} 
          onClick={() => clickEvent(element.id)}
        >
          {element.name}
        </div>
      ))}
    </>
  );
}

export default MyComponent;

关键说明： #

• 用reduce遍历数组生成初始状态对象，确保每个元素默认处于显示状态（true）。
• 点击事件通过展开运算符复制原有状态，仅修改目标元素的状态值，符合React状态不可变的原则。
• 每个div的key使用元素的唯一id，避免因数组顺序变化导致的渲染异常。

方法二：基于索引的状态数组（备选） #

如果元素没有唯一标识，可临时用数组索引作为状态的对应关系，但注意：若数组有增删、排序操作，索引会变化，可能导致状态与元素不匹配，仅在数组结构稳定时使用：

function MyComponent() {
  const uncertainArray = [];
  // 初始化状态数组：长度与目标数组一致，默认全为true（显示）
  const [showStates, setShowStates] = useState(
    new Array(uncertainArray.length).fill(true)
  );

  // 点击事件：切换对应索引元素的显示状态
  const clickEvent = (index) => {
    setShowStates(prevState => {
      const newStates = [...prevState];
      newStates[index] = !newStates[index];
      return newStates;
    });
  };

  return (
    <>
      {uncertainArray.map((element, index) => (
        <div 
          key={index}
          style={{ display: showStates[index] ? "block" : "none" }} 
          onClick={() => clickEvent(index)}
        >
          {element.name}
        </div>
      ))}
    </>
  );
}

export default MyComponent;

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