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

Question

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

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

Answer 1

useEffect的第二个参数处理函数的useEffect 。 因为这是很通用的，所以您的问题的答案是使用空数组。

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

但这取决于您要设置的条件...说实话，我对您的情况有点困惑。 您能否提供更多信息...？

您给出的示例很有问题。 为什么要传播initalValue？ 为什么将v设置为重新渲染选项？

Answer 2

每当需要进行更改时，所使用的模式就是具有一个进行更新的标志。

  const [v, setV] = React.useState(something)
  const [flagV, setFlagV] = React.useState(something)
   React.useEffect(() => {
      if (flagV){ 
       setV({...v ...something);
       setFlagV(false)
         }
}, [something,v,setV,flagV,setFlagV])

Answer 3

我怀疑，如果我知道您为什么将道具与国家结合起来，可能会更好地解决您的问题。

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

借助到目前为止提供的信息，您可以通过记忆道具（在方法中称为“ 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>
  );
};