时间戳

首页 > 解决方案 > 箭头函数不使用组件 ReactJS 中的局部变量

javascript - 箭头函数不使用组件 ReactJS 中的局部变量

问题描述

我在使用事件更新 React 组件内的对象时遇到了麻烦。

const Comp = (props) => {
  ...
  let tango = {alpha: null};
  ...
  let handleFirst = () => {
    tango.alpha = "CLICK";
    console.log(tango);
  }

  let handleSecond = () => {
    console.log(tango);
  }

  return (
    <div id="first" onClick={handleFirst}>text</div>
    <div id="second" onClick={handleSecond}>image</div>
  )
}

当我单击 div 时，first我收到以下控制台输出：{alpha: "CLICK"}，但是当我单击 div 时，second我收到控制台输出，因为它是 null: {alpha: null}。我不想包含tango在useState函数中，因为我想在另一个触发器之后更新组件的状态，所以我不需要在每次编辑对象后渲染组件。
在我看来这很令人沮丧，但我不知道我已经尝试了几乎所有的东西，而且在我看来添加alpha到状态将是解决方案，但我希望我可以避免它。

标签： javascriptreactjs

解决方案

听起来在第一次点击和第二次点击之间有一些重新渲染 - 如果没有，被调用的tango关闭handleFirst将与被调用的关闭相同handleSecond：

const Comp = (props) => {
  let tango = {alpha: null};
  let handleFirst = () => {
    tango.alpha = "CLICK";
    console.log(tango);
  }

  let handleSecond = () => {
    console.log(tango);
  }

  return (<div>
    <div id="first" onClick={handleFirst}>text</div>
    <div id="second" onClick={handleSecond}>image</div>
  </div>)
}

ReactDOM.render(<Comp />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

如果您想保持对tango跨重新渲染的持久引用，而不会对它的更改导致重新渲染本身，您可以使用 ref 代替：

const Comp = (props) => {
  let tangoRef = React.useRef({alpha: null});
  const [someState, setSomeState] = React.useState(0);
  let handleFirst = () => {
    tangoRef.current.alpha = "CLICK";
    setSomeState(someState + 1);
    console.log(tangoRef.current);
  }

  let handleSecond = () => {
    console.log(tangoRef.current);
  }

  return (<div>
    <div id="first" onClick={handleFirst}>text</div>
    <div id="second" onClick={handleSecond}>image</div>
  </div>)
}

ReactDOM.render(<Comp />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

推荐阅读