时间戳

首页 > 解决方案 > 使用 React Hook 获取最新状态值？

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

问题描述

尝试将 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 调用已进行并很快取回数据并myText为 B更新。

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

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

解决方案

  1. 一旦ajax调用返回，在设置之前myText，检查最新的值myState，如果已经改变，那么我们不更新myText

  2. 添加一个清理方法来useEffect中止之前的 ajax 调用，如果它还没有完成。

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

标签： reactjsreact-hooks

解决方案

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

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

推荐阅读