时间戳

首页 > 解决方案 > 如何在没有无限重定向的情况下更新现有状态对象？

javascript - 如何在没有无限重定向的情况下更新现有状态对象？

问题描述

const useExample = (something) => {
   const [v, setV] React.useState(something)
   React.useEffect(() => setV({...v ...something), [something, v, setV])
}

上面的代码运行一个无限循环，因为我使用v的是 set v。如何将 v 设置为使用v但不导致此循环的值？

标签： javascriptreactjsreact-hooks

解决方案

我怀疑如果我知道你为什么要将道具与状态结合起来，可能会有更好的解决方案来解决你的问题。

看起来您正在尝试创建一个函数，该函数将先前传递给它的参数与当前传递给它的参数结合起来，让当前覆盖最后一个属性。如果是这种情况，那么有一种更简单的方法可以做到这一点。

使用到目前为止提供的信息，您可以通过记忆道具（something在您的方法中调用）来防止无限循环，v并让该记忆函数设置合并结果：

import React, { useState, useMemo } from 'react';

const Something = something => {
  const [v, setV] = useState(something);
  //memoize setting merged
  const merged = useMemo(() => {
    return { ...v, ...something };
  }, [something, v]);
  return (
    <div>
      {JSON.stringify(merged)}
      {/* can still set v  */}
      <button onClick={() => setV({ other: 22 })}>
        Add other
      </button>
    </div>
  );
};
export default () => {
  const [p, setP] = useState(1);
  return (
    <div>
      {/* change the props passed to Something */}
      <button onClick={() => setP(p + 1)}>UP</button>
      <Something prop={p} />
    </div>
  );
};

推荐阅读