保留对 React 状态变量的“引用”

据我所知，Javascript 中没有指针。

我有以下问题，但我想知道是否有一个解决方案让我无法解决。解决方案可能是普通的 Javascript，或者像 Context API 这样的 React.js 钩子（useContext），或者更多 Javascript 和 React 的组合，或者解决方案可能是我回到绘图板。

请记住，我将 React.js 引入到在前几年的开发中使用 jQuery 的前端。我的真实情况实际上是一个多表单向导组件，它使用 jQuery 进行下一个/上一个步进和动画。

请不要认为我实际上是在尝试将 jQuery 与 React.js 混合在一起，只是做类似的事情：$('#myBtn').click在 jQuery 中。

我的软件中的实际事件不是“trackMe 更改事件”，因此 useEffect 在这里无济于事。该软件是一个多形式的向导，实际事件是上一个/下一个按钮按下，回调需要知道trackMe的当前值。

这是一个简单的 React 功能组件，演示了我的问题：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

function App() {
    const [trackMe, setTrackMe] = useState('INIT');

    useEffect(() => {
        console.log('trackMe change', trackMe);
    },[trackMe]);

    const handleOnChange = (e) => {
        setTrackMe(e.target.value);
    };

    const startEvent = () => {
        var trackMeVar = trackMe;
        setTimeout(() => {
            console.log('event complete, callback called');
            console.log('value of trackMe: ', trackMe); //always INIT even though state is changing
            console.log('value of trackMeVar: ', trackMeVar); //always INIT even though state is changing
        }, 1000);
    };

    function init() {
        console.log('init');
        $('#myBtn').click(function (e) {
            e.preventDefault();
            setTimeout(startEvent, 1000);
        });
    }

    window.onload = init;

    return (
        <div>
            <input className="form-control" type="text" name="trackme"
                onChange={e => handleOnChange(e)} value={trackMe} />
            <button type="button" id="myBtn">Start Event</button>
        </div>
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

问题是我的回调startEvent有自己的范围版本trackMe状态变量而不是外部范围最新更新的值，状态更改后，在handleOnChange功能。

要查看实际效果，只需在文本框中输入内容，状态就会发生变化。按“开始活动”按钮即可看到trackMe在事件回调中始终是其初始值“INIT”。

我相信我的问题答案的核心是我是否可以重写我的事件回调函数，以便该函数包含我的状态变量的最新值trackMe.

您可以保留以下值trackMe in a ref https://reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables，并从中读取：

function App() {
  const [trackMe, setTrackMe] = useState('INIT');
  const track = useRef('INIT');

  const handleOnChange = (e) => {
      console.log('trackMe before:', trackMe);
      setTrackMe(e.target.value);
      track.current = e.target.value // Sync the state value with the ref's current property
  };

  const startEvent = () => {
      setTimeout(() => {
          console.log('event complete, callback called');
          console.log('value of trackMe: ', track.current); // Read current value in the timeout callback
      }, 1000);
  };

  return (
      <div>
          <input className="form-control" type="text" name="trackme"
              onChange={e => handleOnChange(e)} value={trackMe} />
          <button type="button" onClick={() => setTimeout(startEvent, 1000)} id="myBtn">Start Event</button>
      </div>
  )
}

Demo https://codesandbox.io/s/react-codesandbox-re73w

Source https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function