如何在调用另一个 setState 函数时保存数组的状态？

Question

我正在尝试创建一个 ButtonGroup，可以同时单击多个按钮。单击按钮时，它会改变颜色，按钮的值将添加到数组中，这样如果单击三个按钮，数组将保存所有三个按钮的值。

这是我当前的实现：

import React, { useState } from "react";
import { Button, ButtonGroup, Box } from "@mui/material";

export default function SystemsButtonGroup() {

    const services = ["A", "B", "C"];

    const [flag0, setFlag0] = useState(true);
    const [flag1, setFlag1] = useState(true);
    const [flag2, setFlag2] = useState(true);

    const clickedServices = [];

    const flagChecker = (serviceValue) => {
        if (serviceValue == services[0]) {
            setFlag0(!flag0)
        } else if (serviceValue == services[1]) {
            setFlag1(!flag1)
        } else {
            setFlag2(!flag2)
        }
    }

    const clickHandler = (event) => {
        let serviceValue = event.target.value
        flagChecker(serviceValue)
        console.log(serviceValue)
        if (clickedServices.includes(serviceValue)) {
            clickedServices.splice(clickedServices.indexOf(serviceValue), 1)
        } else {
            clickedServices.push(serviceValue)
        }
        console.log(clickedServices)
    };
    
    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
            }}>
            <ButtonGroup variant="outlined" size="large">
                <Button value = {services[0]} onClick={clickHandler} color={flag0 ? "primary" : "secondary"}>{services[0]}</Button>
                <Button value = {services[1]} onClick={clickHandler} color={flag1 ? "primary" : "secondary"}>{services[1]}</Button>
                <Button value = {services[2]} onClick={clickHandler} color={flag2 ? "primary" : "secondary"}>{services[2]}</Button>
            </ButtonGroup>
        </Box>
    );
}

我已经设法改变按钮的颜色，但我无法在我的数组中获得多个值。每当我单击一个按钮时，数组将只包含最近单击的按钮的值，即使我单击了所有三个按钮也是如此。我认为问题在于调用其他 setState 函数时未保存数组的状态？

在我的代码中哪里可以实现数组状态的保存？

提前致谢！

Answer 1

如果我对您的问题的理解正确，我认为它可能来自您的高级方法。你有三个独立的状态，当一个数组保存你想要的引用时，使用起来会更愉快。

那么你也不需要单独的数组来存储值，你有它的状态 ^^

是这样的吗？ https://codesandbox.io/s/loving-stallman-nj1n0n?file=/src/App.js

如何在调用另一个 setState 函数时保存数组的状态？

How to I save the state of an array while another setState function is being called?

reactjs

material-ui