React setState 仅在第一次时不推送值答案

【问题标题】：React setState not pushing value FIRST TIME ONLYReact setState 仅在第一次时不推送值
【发布时间】：2021-09-22 18:44:34
【问题描述】：

在路上的菜鸟问题... :(

尽管值存在，但使用多个复选框并设置状态永远不会获得第一个值事件。

控制台

如上所示，“值”在选择时被打印出来。

代码

function onChange (e: any) {
        const isChecked = e.target.checked
        const value = e.target.value
        console.log('bool', isChecked, value)
        if(isChecked) {
            console.log('inside val', value)
            setChosenSpeciality([...chosenSpeciality, value])

            console.log('added array', chosenSpeciality)
            filterBySpecialty(chosenSpeciality)
        } else {
            setChosenSpeciality(chosenSpeciality.filter(item => item !== value))
            filterBySpecialty(chosenSpeciality)

            console.log('rest from remove', chosenSpeciality)
        }
    }

<CheckboxContainer>
            {
                   specialties.map((specialty, index) => (
                    <label>  
                        <Checkbox  
                            type="checkbox"
                            name={specialty}
                            value={specialty} 
                            key={index}
                            onClick={onChange}
                        />  
                        {specialty}
                    </label>
                   ))
            }
            </CheckboxContainer>

感谢您的帮助，祝您好运！

【问题讨论】：

您的问题是您希望chosenSpeciality 在此处包含新值吗：console.log('added array', chosenSpeciality)
设置状态是异步的。它排队状态更新。如果您希望它在重新渲染之前立即更新，那是不正确的。我不确定你在问什么。
setState（假设您使用 useState 挂钩）是异步的，因此新状态已正确设置但在您调用 console.log 时尚未设置。看到这个answer
大家好，带有复选框的页面正在渲染，我想选择一个项目，但第一个选择不更新状态（如上所示）。如果我再次点击它会发生。
@SamuelGoldenbaum 确切地说它从不包含第一次的值。如果我再次单击它正在添加。干杯！

标签： reactjs typescript react-hooks

【解决方案1】：

您的问题似乎是您希望状态立即更新，但事实并非如此——它实际上是一个 async 操作。

这种形式的setState()也是异步的，可以多次调用在同一个周期内可以一起批处理。

Ref

更新以考虑到这一点：

function onChange (e: any) {
        const isChecked = e.target.checked
        const value = e.target.value
        console.log('bool', isChecked, value)
        if(isChecked) {
            console.log('inside val', value)
            const temp = [...chosenSpeciality, value];
            setChosenSpeciality(temp)

            console.log('added array', temp)
            filterBySpecialty(temp)
        } else {
            const temp = chosenSpeciality.filter(item => item !== value);
            setChosenSpeciality(temp)
            filterBySpecialty(temp)

            console.log('rest from remove', temp)
        }
    }

【讨论】：

拯救了这一天，干杯！！！