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

Posted 2023-04-14

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

【英文标题】：How to differentiate context values if their state changed in 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 块中执行它并且需要打开多个吗？

【参考方案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]);
...