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

Question

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 是一个对象 proptype {} 并且 activeIndex 是一个数字

如果 data 发生变化，我如何比较它的 prevState？
如果 activeIndex 发生变化，我该如何比较它的 prevState？
我可以在单个 useEffect 块中完成并需要打开多个吗？

Answer 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]);
...
}

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

How to differentiate context values if their state changed in React useEffect

reactjs

react-context

react-hooks

react-state

use-effect