用React Hook获得最新的状态价值

Question

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

是可能的。

用例

UI具有一个带有两个状态的切换开关-A和B，当用户切换到A时，我们进行了一个ajax调用以获取A并在UI中显示的数据，b。

相同

我的代码with useffect

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。

的数据

ajax呼叫A还没有返回，用户切换到B，新的AJAX调用是进行了新的，并很快恢复了数据并更新b。

的myText

10秒之后，Ajax呼叫A最终返回并更新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]);