如何在沒有無限重定向的情況下更新現有狀態對象？

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>
  );
};