我无法从 React 中的事件侦听器上的函数更改变量

Question

我有一个窗口事件侦听器，它调用一个更改变量的函数。但是，当我将 varibale 分配给 prop 时，它不会改变：mousemove

  var x = null

  var y = null

  const cursor = (e) => {

    x = e.screenX + 'px'

    y = e.screenY + 'px'

    console.log(x, y)

    return x, y

  }

  window.addEventListener('mousemove', cursor)

我试图在事件监听器中直接更改它

(window.addEventListener('mousemove', //everything in cursor），但这样我就无法访问变量了。e

我也不能将其与状态一起使用，因为出于某种原因，它变得太滞后并且崩溃。

我怎样才能做到这一点？提前致谢。

这就是我在vscode中看到的：

（这是在 App 组件中，变量和 evenet 侦听器也在 App 中。

沙盒：https://codesandbox.io/s/vigorous-agnesi-9l1ic?file=/src/App.js

Answer 1

组件仅在状态或道具更新时重新渲染。 没有状态或道具，所以它永远不会重新渲染，因此孩子永远不会重新渲染。AppCursor您可以使用附加到的 ref，并直接设置顶部和左侧属性。请不要忘记在卸载组件时删除事件侦听器。Cursorimport React, { useEffect, useRef } from "react";import "./styles.css";import styled from "styled-components";const Cursor = styled.div`&nbsp; height: 30px;&nbsp; width: 30px;&nbsp; border-radius: 50%;&nbsp; border: 1.5px solid black;&nbsp; position: absolute;`;export default function App() {&nbsp; const posRef = useRef(null);&nbsp; const cursor = e => {&nbsp; &nbsp; const { clientX = 0, clientY = 0 } = e;&nbsp; &nbsp; posRef.current.style.left = clientX + "px";&nbsp; &nbsp; posRef.current.style.top = clientY + "px";&nbsp; &nbsp; // console.log(clientX, clientY);&nbsp; };&nbsp; useEffect(() => {&nbsp; &nbsp; window.addEventListener("mousemove", cursor);&nbsp; &nbsp; return () => window.removeEventListener("mousemove", cursor);&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Demo</h1>&nbsp; &nbsp; &nbsp; <Cursor ref={posRef} />&nbsp; &nbsp; </div>&nbsp; );}编辑正如@KirillSkomarovskiy所指出的那样，使用状态并不是使页面陷入困境并崩溃的原因。我怀疑这是/正在添加多个/重复的处理程序，这些处理程序没有被正确清理（可能通过记录每个更新的位置来增加）。mousemoveconst Cursor = styled.div`&nbsp; height: 30px;&nbsp; width: 30px;&nbsp; border-radius: 50%;&nbsp; border: 1.5px solid black;&nbsp; position: absolute;&nbsp; transform: translate(-50%, -50%);&nbsp; top: ${props => props.yPos};&nbsp; left: ${props => props.xPos};`;export default function App() {&nbsp; const [pos, setPos] = useState({ x: 0, y: 0 });&nbsp; useEffect(() => {&nbsp; &nbsp; const cursor = e => {&nbsp; &nbsp; &nbsp; setPos({&nbsp; &nbsp; &nbsp; &nbsp; x: e.clientX + "px",&nbsp; &nbsp; &nbsp; &nbsp; y: e.clientY + "px"&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; // console.log(e.clientX, e.clientY);&nbsp; &nbsp; };&nbsp; &nbsp; window.addEventListener("mousemove", cursor);&nbsp; &nbsp; return () => window.removeEventListener("mousemove", cursor);&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; <h1>Demo</h1>&nbsp; &nbsp; &nbsp; <Cursor xPos={pos.x} yPos={pos.y} />&nbsp; &nbsp; </div>&nbsp; );}

Answer 2

变量 永远不会被有效地更新，因为它是一个 ES6 箭头函数，它以某种方式工作，所以如果你想从 传递值到 或 ，那么你也应该把它们当作函数：xycursor()functionalcursor()xyx = (callback) =>{&nbsp; &nbsp;return callback;}y = (callback) =>{&nbsp; &nbsp;return callback;}现在，您可以将值传递给 和 ：xyconst cursor = (e) => {&nbsp; &nbsp; x (e.screenX + 'px');&nbsp; &nbsp; y (e.screenY + 'px');}然后，您的事件侦听器调用 ：cursor(e)window.addEventListener('mousemove', cursor);无论你想在哪里使用的值，你只需要称它们为：或.xyx()y()这就是工作原理！ES6 Functional Programming