Question

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

用例

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调用终于返回，并更新了myText为A。

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

解决方案

一旦ajax调用返回，在设置myText之前，请检查myState的最新值，如果它已更改，则我们不会更新myText
向useEffect添加清理方法，以终止先前的ajax调用（如果尚未完成）。

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

Answer 1

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

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

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

1 个答案: