如何在React中保持对象数组与哈希表状态的引用关联？

我想在React里让两个状态保持引用关联——一个是对象数组，另一个是该数组中对象构成的哈希表。原生JavaScript里直接赋值引用后，修改其中一个会同步影响另一个，但用useState创建的两个状态修改时没法同步，该怎么实现这个效果？

原生JavaScript示例 #

const state1 = [{id: 1, name: 'foo'}];
const state2 = state1[0];

修改state2以影响state1：

state2.name = "bar";
console.log(state1) // output:  [{id: 1, name: 'bar'}]
console.log(state2) // output:  {id: 1, name: 'bar'}

React尝试代码 #

const [state1, setState1] = useState([]);
const [state2, setState2] = useState({});

setState1([{id: 1, name: 'foo'}]);
setState2(state1[0]);
console.log(state1) // output:  [{id: 1, name: 'foo'}]
console.log(state2) // output:  {id: 1, name: 'foo'}


setState2((prevState) => {
    return {
      ...prevState,
      name: "bar"
    };
  });

console.log(state1) // output:  [{id: 1, name: 'foo'}]
console.log(state2) // output:  {id: 1, name: 'bar'}

解决方案 #

1. 采用单一数据源，通过useMemo派生哈希表（推荐） #

React状态管理的核心原则是单一数据源，避免冗余状态导致不同步。只维护对象数组状态，哈希表作为派生状态实时计算，这样数组变化时哈希表会自动更新，且两者指向的对象引用一致。

import { useState, useMemo } from 'react';

function YourComponent() {
  // 仅维护数组状态作为单一数据源
  const [arrayState, setArrayState] = useState([{id: 1, name: 'foo'}]);

  // 从数组派生哈希表，仅在arrayState变化时重新计算
  const hashState = useMemo(() => {
    return arrayState.reduce((hash, item) => {
      hash[item.id] = item;
      return hash;
    }, {});
  }, [arrayState]);

  // 修改对象的方法：更新数组中的对应项
  const updateItem = (itemId, newName) => {
    setArrayState(prevArray => prevArray.map(item => {
      if (item.id === itemId) {
        // 返回新对象（保持不可变性），同时原引用在哈希表中会同步更新
        return {...item, name: newName};
      }
      return item;
    }));
  };

  // 测试调用
  updateItem(1, 'bar');
  console.log(arrayState); // [{id: 1, name: 'bar'}]
  console.log(hashState[1]); // {id: 1, name: 'bar'}

  return <div></div>;
}

2. 手动同步两个独立状态（不推荐） #

如果必须维护两个独立状态，每次修改其中一个时，需要手动同步更新另一个状态。这种方式容易遗漏同步逻辑，导致状态不一致，仅在特殊场景下使用。

import { useState } from 'react';

function YourComponent() {
  const [arrayState, setArrayState] = useState([{id: 1, name: 'foo'}]);
  const [hashState, setHashState] = useState({});

  // 初始化时同步状态
  useState(() => {
    const initialHash = arrayState.reduce((hash, item) => {
      hash[item.id] = item;
      return hash;
    }, {});
    setHashState(initialHash);
  }, []);

  // 修改哈希表时同步数组
  const updateHashItem = (itemId, newName) => {
    setHashState(prevHash => {
      const updatedItem = {...prevHash[itemId], name: newName};
      // 同步更新数组
      setArrayState(prevArray => prevArray.map(item => item.id === itemId ? updatedItem : item));
      return {...prevHash, [itemId]: updatedItem};
    });
  };

  // 修改数组时同步哈希表
  const updateArrayItem = (itemId, newName) => {
    setArrayState(prevArray => {
      const updatedArray = prevArray.map(item => {
        if (item.id === itemId) return {...item, name: newName};
        return item;
      });
      // 同步更新哈希表
      const updatedHash = updatedArray.reduce((hash, item) => {
        hash[item.id] = item;
        return hash;
      }, {});
      setHashState(updatedHash);
      return updatedArray;
    });
  };

  // 测试调用
  updateHashItem(1, 'bar');
  console.log(arrayState); // [{id: 1, name: 'bar'}]
  console.log(hashState); // {1: {id: 1, name: 'bar'}}

  return <div></div>;
}

为什么React中直接赋值无法同步？ #

1. React的useState更新是异步的，你在调用setState1后立即访问state1[0]，此时state1还没更新，导致setState2拿到的是旧值。
2. 你修改state2时用了扩展运算符{...prevState}创建了新对象，而不是修改原对象的引用，所以数组中的原对象不会受到影响。原生JS中直接修改引用属性，因为两者指向同一个对象，所以会同步变化。

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