代码之家 › 专栏 › 技术社区 › Varun Sukheja

仅对第一状态更改进行响应

easy-peasy redux reactjs javascript

0

Varun Sukheja · 技术社区 · 5 年前

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

这就是我所尝试的:

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

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

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

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

2 回复 | 直到 5 年前

1

3

Ajeet Shah 5 年前

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

const hasRun = useRef(false)

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

ref变量不会参与重新呈现。

2

1

I am L 5 年前

我通常做的是有一个“先前”状态。

您可以使用此钩子来执行以下操作:

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