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

发布于
2022-09-28 云南

更新于
2022-09-28

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

咋就每次点击都执行两次？
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放到全局的状态管理里面，问题依旧
)

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

react javascript

阅读 2.3k

3 个回答

黑暗的光明

✓ 已被采纳

简单，你给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>
  )
}