當它的值為真時，我需要設置復選框

Question

我需要設置，例如復選框的值是否變為真，然后復選框顯示選中如果值變為假復選框被選中，但它的值從后端變為真發生了什么我將值存儲在 state 規則中，但它沒有得到啟用，如果值變為真，當值為真時，我無法檢查和未選中復選框復選框不檢查值何時為真為什么它會發生不確定我也在嘗試設置 onChange，但對如何設置 onchange 感到困惑

來自后端的價值

exactMatch: true
Match: true

使用規則組件

const [rules, setRules] = useState([]);
const fetchSearch = (data) => {
    axios
      .get(API_ENDPOINTS.SEARCH_UPDATE, data)
      .then((response) => setRules(response.data))
      .catch((err) => {
        console.log("error", err);
      });
  };

SearchRuleForm 組件

export default function SearchForm() {

const { setRules, rules, fetchSearch } = useRule();
React.useEffect(() => {
    fetchSearchRule();
  }, []);

const handleCheckBoxChange = (e) => {
    setRules({
      ...rules,
      [e.target.name]: !rules[e.target.name]
    });
  };

 return (
 <Grid item xs={4}>
          <Box className={classes.formText}>
            <Checkbox
              name="exactMatch"
              checked={rules.exactMatch}
              color="primary"
              onChange={handleCheckBoxChange}
            />
            <Typography variant="subtitle2" noWrap={true}>
              Match
            </Typography>
          </Box>
        </Grid>
        
)
}

Answer 1

不知道我是否理解你的問題，我相信你目前無法配置你的 onChange function。 這個 function 應該可以解決您的問題

const handleCheckBoxChange = (e) => {
    setRules({
      ...rules,
      [e.target.name]: !rules[e.target.name]
    });
  };

編輯：這是我嘗試解決方案的代碼框

Answer 2

像這樣實現handleCheckBoxChange function：

const handleCheckBoxChange = (e) => {
    setRules((prevRules) => ({
      ...prevRules,
      [e.target.name]: !prevRules[e.target.name],
    }));
  };