javascript - 使用钩子(Hook)时在回调函数中设置状态

Question

我正在为我的弹球游戏编写一个组件。我必须在“联系时”监听器触发的函数内设置 setState。但是状态没有更新。我可以尝试另一种设计吗？

function Pinball(){
  const[score, setScore] = useState(0);

  useEffect(()=>{
      //... here I set physics environment and have variable world
      world.on('begin-contact',  function(contact){
             //...
             setScore( score + 1 );
       })
  }, []);

  return (<span>{score}</span>);

}

Answer 1

您可以使用 useCallback 作为回调处理程序，并使用 Effect 设置 'begin-contact' 事件监听器。您必须这样传递依赖项:

function Pinball(){
  const[score, setScore] = useState(0);
  const handleBeginContact = useCallback(function(contact){
    setScore( score + 1 );
  }), [score] );
  useEffect(()=>{
    world.on('begin-contact',  handleBeginContact);
  }, [world])

  return <span>{score}</span>;
}

您可以像这样进一步简化 setScore 事件:setScore(score => score+1)那你就不用传入分数依赖了。

此外，正如 Dan Pantry 在评论中所说，您需要在 useEffect 中返回一个函数，该函数取消注册“begin-contact”事件监听器，例如 return () => world.off('begin -contact')，但这将取决于您对 world 的实现。