Question

所以...我正在尝试使用useEffect，但是发现了一个奇怪的行为。我有一个哑巴状态。我调用useEffect，并在其中添加一个新的eventListener。此事件侦听器必须更改给定条件的状态。问题是状态永远不会改变... 有想法吗？

const componentToRender=()=>{
    const [renderStatus, changeRenderStatus]=useState(false);
    const [transitionStatus, changeTransitionStatus]=useState(false);
    if(!renderStatus){
        useEffect(()=>{
            window.addEventListener("transitionend",(event)=>{
                if(event.propertyName==="width"){
                    changeTransitionStatus(transitionStatus?false:true);
                }
            })
        })
        changeRenderStatus(true)
    }
    return (transitionStatus)?<div> First case </div>:<div> Second case</div>
}

还有另一个对onMouseOver进行DOM操作的函数。

此函数应更改事件监听器的状态，但不能更改。

Answer 1

您不能在if语句中使用钩子，请参见hooks-rules
您应该从useEffect挂钩中返回清理函数，以删除事件侦听器并避免内存泄漏
您可能希望效果只运行一次，因此请提供并使用空数组作为useEffect的第二个参数（我认为您不需要renderStatus）
在useEffect内，当调用状态设置器时，首选函数形式，以便您始终具有新的状态值。

示例

const componentToRender = () => {
  //const [renderStatus, changeRenderStatus] = useState(false);
  const [transitionStatus, changeTransitionStatus] = useState(false);

  // No condition
  useEffect(() => {
    const handler = (event) => {
      if (event.propertyName === "width") {
        //passe a function to state setter to get fresh state value
        changeTransitionStatus(transitionStatus => transitionStatus ? false : true);
      }
    };

    window.addEventListener("transitionend", handler);

    // clean up
    return () => window.removeEventListener("transitionend", handler);
  }, []); // empty array => run only once

  return (transitionStatus) ? <div> First case </div> : <div> Second case</div>
}

反应挂钩与事件监听器

1 个答案: