React 组件状态未正确设置

Question

我在 React 组件中有以下 useEffect 钩子，它从 api 获取数据。

http

是一个axios实例。我有一个反应使用状态钩子

const [inputsData, setInputsData] = useState(false);

。

    useEffect(() => {
        if (active.id) {
            http.get(`/stock/${title}/${active.id}`).then((response) => {
                setInputsData(response.data);
                console.log(inputsData);
            });
        }
    }, [title, active.id, refresh]);

只要标题（URL 路由参数）、active.id（active 是存储当前要显示的项目的数据的反应状态）或刷新变量发生变化，显示的数据就会被刷新和重新渲染。

但是，尽管我已经确认来自 api 的数据是正确的，但当我设置组件的状态时，当我

console.log

它时，它显示的是旧状态。正在呈现的状态也是旧的状态，我必须重新导航到活动项目或刷新页面才能看到正确的数据。

基本上：
我点击a，它显示a的数据。
我点击 b，它显示了 a 的数据。
我点击c，它显示了b的数据。

知道为什么数据设置不正确吗？

我尝试运行它两次来模拟重新导航到活动项目。那没用。
我尝试将状态设置为

false

，然后将其设置为新数据。那没用。
我尝试在 setState 上使用

setTimeout

因为我认为延迟它可能会有所帮助。那没用。

Answer 1

您可能遇到了竞争状况，发生的情况如下：

1-您拥有当前状态

2-您进行的更改会触发 useEffect 但使用旧数据（可能会更改

refresh

状态？）

3-您进行所需的实际更改，例如更改

title

或

active.id

4- 由于您有 2 个请求，一个来自

2

，一个来自

3

，并且由于这些是异步操作，因此来自

3

的 Promise 可能会在来自

2

的 Promise 之前解析，因此状态将使用最后更新状态

如果这是问题所在，您实际上可以使用 boolean flag 来解决它 所以它看起来像这样：

    useEffect(() => {
        let ignore = false;
        if (active.id) {
            http.get(`/stock/${title}/${active.id}`).then((response) => {
               if (!ignore) {
                setInputsData(response.data);
                console.log(inputsData);
              }
            });
        }
    return () => {ignore = true}
    }, [title, active.id, refresh]);