使用 React Hook 获取最新状态值？

Question

尝试将 React Hook 与功能组件一起使用，但遇到这种需要获取最新值的情况，我认为使用类组件您可以依靠 this.state.foo 成为最新值，但不确定 React Hook 是否可能。

用例

UI 有一个切换开关，有两种状态 - A 和 B，当用户切换到 A 时，我们进行 ajax 调用以获取 A 的数据并在 UI 中显示，对于 B 也是如此。

我的 useEffect 代码

function (props) {

    const [myState, setMyState] = useState('A')
    const [myText, setMyText] = useState()

    useEffect(()=>{
        ajaxCall(myState).then((data)=>{
            setMyText(data)   
        })
    }, [myState]) 

    return <div>{myText}</div>

}

这通常有效，但并非总是如此，ajax 调用需要几秒钟才能完成，用户可以快速切换开关，我们遇到如下问题：

用户切换到A，ajax调用试图获取A的数据。

A 的 Ajax 调用尚未返回，用户切换到 B，新的 Ajax 调用已进行并很快取回数据并为 B 更新 myText。

10 秒后，A 的 ajax 调用终于返回并更新了 A 的 myText。

现在您看到了问题 - 用户选择了 B，但 UI 正在为 A 呈现 myText。

解决方案

1. 一旦ajax调用返回，在设置myText之前，检查myState的最新值，如果有变化，则不更新myText

2. 向useEffect 添加一个清理方法，以在之前的ajax 调用未完成时中止它。

我不知道 React Hook 是否可以使用解决方案 1，所以似乎首选方法是解决方案 2？

Answer 1

您可以添加一个不会中止 ajax 调用的清理方法，而只是告诉您的 useEffect 钩子该值不再是当前值，然后如果返回值则忽略 setText：

useEffect(() => {
  let isCurrent = true;
  ajaxCall(myState).then(data => {
    if (isCurrent) {
      setText(data);
    }
  })
  return () => {
    isCurrent = false;
  }
}, [myState]);