无需设置即可自动将状态更改为false

Question

我遇到这种情况需要根据其选择将sortAscending顺序设置为布尔值true或false。一旦我尝试排序它将状态更改为true并立即更改回false。这在Lazy加载列表中影响了我。

handleSortRoomsOnClick: function(sortBy) {
    if(sortBy == this.state.sortBy) {
        this.setState({
            isSortAsc: !this.state.isSortAsc,
            page: 1
        });
        this.handleFetchRooms(1, sortBy, this.state.isSortAsc);
    } else {
        this.setState({
            sortBy: sortBy,
            isSortAsc: true,
            page: 1
        });
        this.handleFetchRooms(1, sortBy, true);
    }
},

Answer 1

问题是setState是异步的。您无法设置它，然后立即引用值this.state.isSortAsync。因此，您可以将其保存在如下变量中，或在setState中使用回调。

handleSortRoomsOnClick: function(sortBy) {
    if(sortBy == this.state.sortBy) {
        const isSortAsc = !this.state.isSortAsc;
        this.setState({
            isSortAsc: isSortAsc,
            page: 1
        });
        this.handleFetchRooms(1, sortBy, isSortAsc);
    } else {
        this.setState({
            sortBy: sortBy,
            isSortAsc: true,
            page: 1
        });
        this.handleFetchRooms(1, sortBy, true);
    }
}

编辑：我想我可能会稍微强调一下：

handleSortRoomsOnClick(sortBy) {
    const isSortAsc = (sortBy === this.state.sortBy) ? !this.state.isSortAsc: true;
    this.setState({
        sortBy,
        isSortAsc,
        page: 1
    });
    this.handleFetchRooms(1, sortBy, isSortAsc);
}