Чекбокс React input не обновляет состояние косвенно

Question

К сожалению, я не понял логику ввода checkbox в рендер. Вот проблема:

1) У меня есть флажок типа ввода с атрибутами onChange и checked;2) Также у меня есть кнопка handleSearch, которая после нажатия кнопки получает информацию об API из бэкэнда;3) Если я нажму checkbox, он также получит информацию от API (из того же API, что и на втором шаге с теми же параметрами).

Проблема в том, что если я нажму checkbox, он отправит ложный параметр checkbox, потому что, как я понимаю, он работает по какой-то причине наоборот. Но, если я попытаюсь сначала нажать кнопку, она будет работать ОК.

Так что мне нужно отправить параметр truey при обработке checbox.

вход в render ():

    <input
        type="checkbox"
        className="custom-control-input"
        name="grouping"
        id="updateprice"
        checked={grouping}
        onChange={this.onGroupingChange}
    />      

обработчик флажка ():

      onGroupingChange = (e) => {
         const {grouping} = this.state;
        this.setState({ grouping: e.target.checked});
             this.getSales(grouping);
    };

Обработчик OnClick ():

      handleSearch = () => {
        const { grouping  } = this.state;
        this.setState({ isLoading: true });
        this.getSales(grouping);
    };

getSales ()

getSales = (grouping) => {
        let notattr;
        if (grouping===false){
            notattr=1
        }
        else notattr = 0
        this.setState({isLoading: true})
        Axios.get('/api/report/sales', {
            params: { notattr }

        })
        .then(res => res.data)
            .then((sales) => {
                this.setState({
                    sales,
                    isLoading: false,
                    handleGrouping: true,
                    activePage: 1,
                    currentRange: {
                        first: (this.state.itemsPerPage) - this.state.itemsPerPage,
                        last: (this.state.itemsPerPage) - 1
                    },
                    orderBy: ''
                })
            })
            .catch((err) => {
                this.setState({isLoading: false})
                console.log(err)
            })
    };

основной сценарий проблемы 1:
1) Я открываю страницу;
- флажок на экране true;
2) Я нажимаю кнопку поиска;
- API отправляет noattr:0потому что grouping:true;
3) Теперь я хочу установить флажок;
- API все еще отправляет noattr:0, потому что grouping:true (но я ожидал grouping:false значение)
4) Если я опишу флажок позже, он будет работать наоборот. Но если я обработаю кнопку поиска, она отправит информацию о OK.
Очевидно, что где-то есть небольшая ошибка, но я пробовал много разных комбинаций, и кажется, что не нашел правильную.

Answer 1

      onGroupingChange = (e) => {
         const {grouping} = this.state;
        this.setState({ grouping: e.target.checked});
             this.getSales(grouping);
    };

Я думаю, вы должны вызывать так: this.getSales (e.target.checked)

Вы вызываете функцию getSales с предыдущим значением, а не с обновленным значением.