1

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

这是我尝试过的：

空依赖的第一种方法

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

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

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

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

在这种情况下，我不断从 API 获得更新的响应

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

4

2 回答 2

3

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

const hasRun = useRef(false)

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

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

于 2021-03-22T08:31:02.647 回答
1

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

你可以使用这个钩子来做到这一点：

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

于 2021-03-22T08:38:38.213 回答