javascript - 组件的状态未使用 select 和 onChange 处理程序更新

Question

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

class SomeComponent extends Component {
    state = {
        data: [],
        currentCategory: 'all'
    }
    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!!!
        console.log(currentCategory);

        // Get data via XHR...
    }
    render() {
        return (
            <div>
                <select value={currentCategory} onChange={this.switchCategory}>
                    <option value="all">All</option>
                    {categories.map( category => 
                    <option key={category._id} value={category.category}>{category.display}</option>    
                    )}
                </select>

                <table>
                    // ... prints data with this.state.data
                </table>
            </div>
        );
    }
}

上面的代码只是简短的。代码很简单，我只是将select元素的一个值与this.state.currentCategory同步，然后用类的switchCategory方法检测它的切换。

但主要问题是当我访问组件的状态时，它总是包含以前的值，而不是现在。您可以看到我在选择更改的值时更新了 currentCategory。

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

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

        this.loadData();
    }

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

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

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

        // Get data via XHR...
    }

所以最终 XHR 以以前的值出现，它给了我没有预料到的错误数据。
之后，选择其他值的选择(我们称之为香蕉)，它有一个苹果，而不是香蕉!

据我所知，setState 是“同步”工作，因此调用 this.switchCategory 将在更新状态后发生，因此它必须具有当前值，而不是以前的值。

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

那么，我错过了什么？为什么我总是得到旧数据，而不是现在？如果我做错了事情，那么我能做些什么呢？

任何建议都会非常感激。谢谢!

最佳答案

这里的问题是 setState是异步的(在某些情况下可以同步)。这就是为什么你得到以前的值(value)。

有两种可能的解决方案。

//
// 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 [link]

关于javascript - 组件的状态未使用 select 和 onChange 处理程序更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41484812/

上一篇：asp.net-mvc - ASP.NET MVC : Retrieving form fields with the same name

下一篇：delphi - 优化数据集循环

相关文章：

滚动更改导航栏不透明度的 Javascript 使我的导航内容消失

javascript - Jquery验证引擎位置错误

reactjs - React proptypes 组件与元素

javascript - 具有动态路由的 react 路由器在浏览器直接链接上给出 404

javascript - 如何制作不可见的倒计时，在页面关闭后继续？

php - javascript if 语句出现问题

javascript - 使用ajax获取XML数据时阻止跨源请求

javascript - 如何在基于类的组件中的函数内部抛出 react 警报

javascript - 高亮值变化 ReactJS

reactjs - 如何设置 Material-UI Tabs 组件的高度？

©2024 IT工具网  联系我们

Answer 1

这里的问题是 setState是异步的(在某些情况下可以同步)。这就是为什么你得到以前的值(value)。

有两种可能的解决方案。

//
// 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 [link]