如果它们的状态在 React useEffect 中发生变化，如何区分上下文值答案

【问题标题】：How to differentiate context values if their state changed in React useEffect如果它们的状态在 React useEffect 中发生变化，如何区分上下文值
【发布时间】：2021-02-14 13:23:58
【问题描述】：

const someFunction = () = {
...
const { data, setData, activeIndex, setActiveIndex } = useContext(MusicContext);
 

  
  useEffect(() => {
    console.log(" useEffect called");
    
    // another component called setData or setActiveIndex which resulted here  
    // how to compare data to its prevState if it changed  
    // how to compare activeIndex to its prevState if it changed  

  }, [activeIndex, data]);
...
}

上面是一些对两个不同的上下文变量有 useEffect 的函数

data 是一个对象属性类型 {}，activeIndex 是一个数字

如果 data 发生变化，我如何将其与其 prevState 进行比较？
如果 activeIndex 发生变化，我如何将其与其 prevState 进行比较？
我可以在单个 useEffect 块中执行它并且需要打开多个吗？

【问题讨论】：

标签： reactjs react-hooks use-effect react-context react-state

【解决方案1】：

您可以useRef 存储上次看到的值。这通常被提取到“usePrevious”自定义挂钩中。

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}

现在在您的组件中，您可以检查之前的值。

const SomeFunction = () = {
  ...
  const { data, setData, activeIndex, setActiveIndex } = useContext(MusicContext);
 
  const prevData = usePrevious( data );
  const prevActiveIndex = usePrevious( activeIndex );
  
  useEffect(() => {
    if ( data !== prevData ) {
      // do something
    }
    if ( activeIndex !== prevActiveIndex ) {
      // do something
    }

  }, [activeIndex, data]);
...
}

【讨论】：