Question

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

这是我试过的：

空依赖的第一种方法

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

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

依赖项中状态属性的第二种方法

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

在这种情况下，我不断收到来自 API 的更新响应

这两种方法对我都不起作用。所以请提出更好的解决方案。

Answer 1

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

const hasRun = useRef(false)

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

引用变量不会参与重新渲染。

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 钩子来简化此操作，但该钩子非常方便，可用于检查前一个值和当前值。

反应只听第一个状态变化

空依赖的第一种方法

依赖项中状态属性的第二种方法

2 个答案: