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设置“开始接触”事件侦听器。您必须这样传递依赖项：

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内部返回一个函数，该函数可取消注册“开始接触”事件侦听器，例如return () => world.off('begin-contact')，但这取决于您对的实现。 world。

使用挂钩时在回调函数中设置状态

1 个答案: