Reactjs 使用状态与复选框不同步

我正在try 构建一个多复选框，并使用usasta函数将选中的值推入array.但是，当我选中一个复选框时，只有当我选中其他选项时，它的值才会被推送到array.

对于EX:

1. 如果选中红色选项，则不会将任何内容推送到array.
2. 如果我选中蓝色选项，则只有红色值(之前选中)被推送到array.
3. 如果选中绿色选项，则红色和蓝色值仅出现在数组中

以下是我的代码

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { filterProducts } from "../../redux/Shopping/shopping-actions";

const filterValues = [
  {
    heading: "Colour",
    items: ["Red", "Blue", "Green"],
  },
  {
    heading: "Gender",
    items: ["Men", "Women"],
  },
  {
    heading: "Price",
    items: ["0-Rs250", "Rs251-450", "Rs 450"],
  },
  {
    heading: "Type",
    items: ["Polo", "Hoodie", "Classic"],
  },
];

const Filter = ({ filter, searchArray, setSearchArray }) => {
  
  const handleCheck = (e) => {
    if (e.target.checked === true) {
      setSearchArray([...searchArray, e.target.value]);
    } else {
      setSearchArray(searchArray.filter((id) => id !== e.target.value));
    }
    if (searchArray.length > 0) {
      filter(searchArray);
    }
  };
  return (
    <div>
      <aside className="ml-4 mt-16">
        {filterValues.map((item) => {
          return (
            <>
              <h3 className="mb-4 mt-2 ml-4 font-semibold text-gray-900 dark:text-black">
                {item.heading}
              </h3>

              <ul className="w-48 text-sm font-medium text-black-900 bg-white dark:text-white">
                {item.items.map((i) => {
                  return (
                    <li className="w-full rounded-t-lg">
                      <div className="flex items-center pl-3">
                        <input
                          id="checkbox"
                          type="checkbox"
                          value={i}
                          onChange={(e) => handleCheck(e)}
                          className="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
                        />
                        <label
                          for="checkbox"
                          className="py-3 ml-2 w-full text-sm font-medium text-gray-900 dark:text-black"
                        >
                          {i}
                        </label>
                      </div>
                    </li>
                  );
                })}
              </ul>
            </>
          );
        })}
      </aside>
    </div>
  );
};

const mapDispatchToProps = (dispatch) => {
  return {
    filter: (query) => dispatch(filterProducts(query)),
  };
};

export default connect(null, mapDispatchToProps)(Filter);

过滤函数

case actionTypes.FILTER_PRODUCT:
      const searchParameters = data && Object.keys(Object.assign({}, ...data));
      let filterData;
      console.log("testing", action.payload);

      if (action.payload.length === 0) {
        filterData = state.products;
      } else {
        action.payload.forEach((i) => {
          filterData = state.products.filter((item) =>
            searchParameters.some((parameter) =>
              item[parameter]
                .toString()
                .toLowerCase()
                .includes(i.toLowerCase())
            )
          );
        });
      }
      return {
        ...state,
        filteredData: filterData,
      };
    default:
      return state;
  }