Question

一个像下面这样的组件

function Comp(){
  const [a, setA] = useState(0);

  useEffect(()=>{
    someService.on('event', ()=>{
      // how to get the latest a?
      console.log(a);
    })
  }, []);

  return (<button onClick={()=>{setA(a+1); someService.emit('event');}}>XXX</button>)
}

我希望每次单击按钮时，我都能获得具有最新状态的控制台，我知道的方式是 useRef：

const aRef = useRef(a);
useEffect(()=>{
  aRef.current = a;
}, a);

那么console aRef.current可以达到最新的值，但是有没有更好的方法？

Answer 1

不知道你说的最新版是什么意思。但是如果你想跳过 useEffect 的初始渲染并在之后获取值。你可以使用那个钩子：

import { useRef, useEffect } from 'react';

export function useFirstRender() {
  const firstRender = useRef(true);

  useEffect(() => {
    firstRender.current = false;
  }, []);

  return firstRender.current;
}

在那种情况下：

function Comp(){
  const [a, setA] = useState(0);
  const firstRender = useFirstRender();

  useEffect(()=>{
    if(!firstRender){
    someService.on('event', ()=>{
      // how to get the latest a?
      console.log(a);
    })
   }
  }, []);

  return (<button onClick={()=>{setA(a+1); someService.emit('event');}}>XXX</button>)
}

Answer 2

您可以使用另一个 useEffect 来跟踪“'a”状态的变化

useEffect(() => {
console.log(a)
}, [a])

或者在服务事件中移动 setA。您不能在设置状态后直接控制台记录最新状态，因为它会在您控制台记录后设置，因此您会得到陈旧的数据。这就是为什么您需要使用另一个变量跟踪新状态并将其用作参考的原因

function Comp(){
  const [a, setA] = useState(0);

  useEffect(()=>{
    someService.on('event', ()=>{
       Const myNewA = a+1;
      setA(myNewA); 
      console.log(myNewA);
    })
  }, []);

  return (<button onClick{someService.emit('event');}}>XXX</button>)
}

从 useEffect 中注册的回调获取最新状态

2 个答案: