反应只听第一个状态变化

Question

我在 react 中使用 useEffect 来监听 redux(easy-peasy) 状态变化，但我只想监听第一个值的变化。
因为当我的页面加载时，状态有一个默认值，然后进行 API 调用，因此数据发生变化，但 API 是轮询 API，因此它会一次又一次地获取数据在很短的时间内。但我的要求之一是只听第一个 API 数据。

这是我试过的：

具有空依赖项的第一种方法

useEffect(() => {
        // my code 
    },[])

在这种情况下，我得到了状态的默认值，而不是第一个 API 响应。

第二种方法在依赖项中具有状态属性

useEffect(() => {
        // my code
    },[myState])

在这种情况下，我不断收到来自 API

的更新响应

这两种方法都不适合我。所以请提出更好的解决方案。

Answer 1

您可以使用 ref 变量并将状态与初始状态（根据您的实现可能为空、未定义、空对象）进行比较：

const hasRun = useRef(false)

useEffect(() => {
  if (!hasRun.current && myState !== initialState) {
    hasRun.current = true
    // run my code
  }
},[myState])

ref 变量不会参与重新渲染。

Answer 2

我通常用这个做的是有一个“以前”的状态。

你可以使用这个钩子来做那个：

const usePrevious(value) {
  const ref = useRef();

  useEffect(() => {
    ref.current = value;
  }, [value]); // only re-run if value changes

  // return previous value (happens before update in useEffect)
  return ref.current;
}

然后你可以这样做：


// I usually create a distinct initial state
const [var, setVar] = useState(null);
const prevVar = usePrevious(var);

useEffect(() => {
  if (var !== prevVar && var !== null) {
    // logic here
  }
}, [prevVar, var]);

是的，您可以通过不使用 usePrevious 挂钩来简化此过程，但该挂钩非常方便，可用于检查先前值和当前值。

反应只听第一个状态变化

React listen to 1st state change only

javascript

reactjs

redux

easy-peasy

具有空依赖项的第一种方法

第二种方法在依赖项中具有状态属性

反应只听第一个状态变化

React listen to 1st state change only

javascript

reactjs

redux

easy-peasy

具有空依赖项的第一种方法

第二种方法在依赖项中具有状态 属性

第二种方法在依赖项中具有状态属性