Javascript 组件'；s状态未使用select和onChange处理程序更新

我制作了一个组件，在用户选择元素值时通过xhr加载数据

因此在这种情况下，this.state.currentCategory不能像其他“Apple”一样包含“all”，但它仍然包含“all”，而不是“Apple”

所以最终XHR与前面的值一起出现，它给了我错误的数据，这是我没有预料到的。 然后，选择select的其他值（我们称之为香蕉），它有一个苹果，而不是香蕉

正如我所知，setState是“sync”作业，因此调用this.switchCategory将在更新状态后进行，因此它必须具有当前值，而不是以前的值

但当我在控制台中打印组件的状态时，它不是

那么，我错过了什么？为什么我总是获取旧数据，而不是当前数据？如果我做了一些错误的事情，那么我能做什么呢

---

任何建议都将不胜感激。谢谢

这里的问题是

setState

是异步的（在某些情况下可以同步）。这就是为什么你会得到以前的值

有两种可能的解决办法

//
// 1. use value directly.
//
switchCategory = (ev) => {
    this.setState({ currentCategory: ev.target.value });
    this.loadData(ev.target.value);
}

loadData = async (currentCategory) => {
    console.log(currentCategory);

    // Get data via XHR...
}

//
// 2. use completition callback on `setState`.
//
switchCategory = (ev) => {
    this.setState({ currentCategory: ev.target.value }, () => {
        this.loadData(ev.target.value);
    });
}

loadData = async () => {
    const { currentCategory } = this.state;
    console.log(currentCategory);

    // Get data via XHR...
}

---

文章同步

setState

在React

中所选类别的打印是否打印正确的所选类别？是否尝试删除异步？是否绑定onChange？在类的顶部和构造函数中添加一个构造函数：

this.onChange=this.onChange.bind（this）

谢谢你们的帮助！你能用setState的async解释“某些情况”吗？我只是想确定一下。哦，我刚刚在文档中找到了setState的解释！它是异步的，我不知道！谢谢Andreyco@我用这篇文章的链接更新了我的答案

    switchCategory = (ev) => {
        console.log('Selected category is ' + ev.target.value);

        this.setState({
            currentCategory: ev.target.value
        });

        this.loadData();
    }

    loadData = async () => {
        let { currentCategory } = this.state;

        // Always print previous value!!! I expected "Apple", but it has "all"
        console.log(currentCategory);

        // Get data via XHR...
    }

//
// 1. use value directly.
//
switchCategory = (ev) => {
    this.setState({ currentCategory: ev.target.value });
    this.loadData(ev.target.value);
}

loadData = async (currentCategory) => {
    console.log(currentCategory);

    // Get data via XHR...
}

//
// 2. use completition callback on `setState`.
//
switchCategory = (ev) => {
    this.setState({ currentCategory: ev.target.value }, () => {
        this.loadData(ev.target.value);
    });
}

loadData = async () => {
    const { currentCategory } = this.state;
    console.log(currentCategory);

    // Get data via XHR...
}