Question

我有2种状态，一种是从API响应设置的，另一种是在API响应更改特定阈值时设置的，并在超时后将其清除，我使用钩子来实现相同的状态。

所以我想知道哪种方法更好

const [data, setData] = useState();
const [thresholdChanged, setThresholdChanged] = useState();
// I clear thresholdChanged message after 5 seconds
useEffect(() => {
  if(thresholdChanged !== undefined) {
    const timeout = setTimeout(() => setThresholdChanged(undefined), TIMEOUT)
    return () => clearTimeout(timeout);
  }
  return undefined;
}, [thresholdChanged])

现在设置数据我有2个选项第一个永远不会重新创建update方法，而是在第一个setter中调用另一个setter，这是有效的模式吗？

const update = useCallback((newData) => {
   setData((currentData) => {
     if(currentData < SOME_VALUE && newData > SOME_VALUE) {
       setThresholdChanged(true)
     }
     return newData;
   })
}, [])

或者我应该选择第二种方法，它每次数据更新时都会重新创建方法

const update = useCallback((newData) => {
   if(data < SOME_VALUE && newData > SOME_VALUE) {
       setThresholdChanged(true)
   }
   setData(newData)
}, [data])

哪种方法更好？为什么？

注意：简化了询问问题的代码。

Answer 1

您应该选择选项＃1的原因有两个：

使用currentState函数访问prevState（通常称为setState）是一种很好的做法。这样可以确保您从状态中读取新的值。
由于不会在每次data更改时都重新创建它，因此您可以在接收React.memo()方法为update的组件上使用props

const update = useCallback((newData) => {
   setData((currentData) => {
     if(currentData < SOME_VALUE && newData > SOME_VALUE) {
       setThresholdChanged(true)
     }
     return newData;
   })
}, [])

我应该在另一个状态更新中更新状态，还是应该？

1 个答案: