javascript - React 输入复选框不间接更新状态

Question

不幸的是，我不明白渲染中输入checkbox的逻辑。问题是这样的:

1) 我有输入类型复选框，其上带有 onChange 和 checked 属性；
2)我还有按钮handleSearch，点击按钮后它会从后端获取API信息；
3)如果我点击复选框，它也会从API接收信息(来自与第二步中相同的API，具有相同的参数)。

问题是:如果我单击checkbox，它将发送checkbox的虚假参数，因为据我所知，由于某种原因，它反之亦然。但是，如果我尝试先单击按钮，它就会正常工作。

所以我需要发送处理复选框的truthy参数。

在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值)< br/> 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 函数。