Reactjs挂钩:更新地图的值

Question

我是reactjs的新手，这就是为什么它对你来说很天真

我需要更新一个映射的值，其中它的键是未知的。

  const App = () => {
    const [storeMap, setStoreMap] = useState(new Map());
    let _tmpMap = new Map();
    return (<>
    {Object.keys({ key1: "hey", key2: "you" }).map((item) => {
          return (
            <button
              value={item}
              key={item}
              onClick={(e) => {
                _tmpMap.set(item, e.target.value);
           
                console.log(..._tmpMap); // {1}
                setStoreMap(_tmpMap);
              }}
            >
              {item}
            </button>
          );
          //   return <i key={item}>KJ </i>;
        })}
  </>)
   
  }

点击两个按钮后，我希望在上面的代码中看到的是：

  /*    {1}    */ 
  console.log(..._tmpMap)
  //i expect this: {key1:"key1" , key2:"key2"}

我在现实中看到的是按下键1后的{key1:"key1"}和按下<strong]键2>后的{ key2:"key2"}

我的问题是：

如何更新storeMap，同时保留其以前的条目？

这是代码

Answer 1

Ciao，这里是工作代码。如果单击key1或key2按钮，则元素将添加到Map中，如果单击show result按钮，则会看到storeMap值。

Answer 2

当您调用setStoreMap时，组件会重新调用，_tmpMap会再次计算为新Map。更新的贴图属于上一次渲染，无法访问。任何你想在渲染之间保留的东西都必须处于状态或引用中，所以，你可以这样做：

const App = () => {
    const [storeMap, setStoreMap] = useState(new Map());
    let _tmpMap = useRef(new Map());
    return (<>
    {Object.keys({ key1: "hey", key2: "you" }).map((item) => {
          return (
            <button
              value={item}
              key={item}
              onClick={(e) => {
                _tmpMap.current.set(item, e.target.value);
                setStoreMap(new Map(_tmpMap.current));
              }}
            >
              {item}
            </button>
          );
          //   return <i key={item}>KJ </i>;
        })}
  </>)   
}

然而，通常建议不要将Maps与React一起使用，因为它们是可变的，并且React无法知道一个Maps何时发生突变。storeMap触发重传和效果的唯一方法是，每次更新时都将其设置为新的Map。如果你绝对必须使用Map，那么可变引用是React提供的最接近它们的东西。对象是关于React状态下最复杂的东西。请参阅此线程。

Answer 3

storeMap.set((更新映射，setStoreMap设置状态。

React比较新旧Map的引用，在本例中，新旧Map具有相同的值。如果您想要React to"；知道"；关于更新，您需要将Map的克隆而不是旧引用的副本传递给setStoreMap，您可以通过创建新Map来实现这一点。我相信你可以放弃使用_tmpMap。

const App = () => {
    const [storeMap, setStoreMap] = useState(new Map());
    const updateStoreMap = (k, v) => {
        // pass a clone of storeMap
        setStoreMap(new Map(storeMap.set(k, v)));
    };
    
    return (
        <>
            {Object.keys({ key1: 'hey', key2: 'you' }).map((item) => {
                return (
                    <button
                        value={item}
                        key={item}
                        onClick={(e) => {
                            updateStoreMap(item, e.target.value);
                        }}
                    >
                        {item}
                    </button>
                );
                //   return <i key={item}>KJ </i>;
            })}
        </>
    );
};