各位尊贵的大佬，帮我看下这段代码， 是不是引发了什么原理级别的错误？

作者站长头像
站长
· 阅读数 13

各位尊贵的大佬，有三个问题请教：

  1. 咋就每次点击都执行两次？2.这种写click 咋还能正常调setNum？
import { useEffect, useRef, useState } from 'react';

function App() {
  const [num, setNum] = useState(100)
  const testRef = useRef<any>('')
  useEffect(() => {
    testRef.current.addEventListener('click', () => {
      console.log('卧槽');
      setNum(9527)
    })
  }, [])
  return (
    <div>
      <div ref={testRef}>点击测试{num}</div>
    </div>
  );
}

export default App;

3.这个是我核心想问的问题，我把openlayers 引入到react中：

map.on('singleClick', () => {
   // 我在这里调setState时，就没反应了（state没更新）
  //  我把state放到全局的状态管理里面，问题依旧
)

这中间有何种神秘的操作吗？ 求指点

回复
1个回答
avatar
test
2024-07-20

简单，你给useEffect 上 加上“清除本次Effect产生的副作用”的函数就好了，然后你就只会看到一个卧槽。

在你这里的“清除本次Effect产生的副作用”意思就是，移除本次Effect中的点击事件的监听回调函数。

import { useEffect, useRef, useState } from "react"

export default function App() {
  const [num, setNum] = useState(100)
  const testRef = useRef<any>("")
  useEffect(() => {
    const node = testRef.current
    const listener = () => {
      console.log("卧槽")
      setNum(9527)
    }
    node.addEventListener("click", listener)
    return () => node.removeEventListener("click", listener)
  }, [])
  return (
    <div>
      <div ref={testRef}>点击测试{num}</div>
    </div>
  )
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容