箭頭函數在組件 ReactJS 中不使用局部變量

Question

我在用事件更新 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>
  )
}

當我first點擊 div 時，我收到以下控制台輸出： {alpha: "CLICK"} ，但是當我second點擊 div 時，我收到控制台輸出，因為它是 null: {alpha: null} 。 我不想在useState函數中包含tango因為我想在另一個觸發器之后更新組件的狀態，所以我不需要在每次編輯對象后渲染組件。
在我看來非常令人沮喪，但我不知道我已經嘗試了幾乎所有的方法，在我看來，將alpha添加到 state 將是解決方案，但我希望我可以避免它。

Answer 1

聽起來在第一次點擊第二次之間有一些重新渲染 - 如果沒有，被調用的handleFirst關閉的tango將與被調用的handleSecond關閉的tango相同：

 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>