问在第二次单击后响应复选框更新

EN

const contentFilters = ['Videos', 'Life Events', 'Collabs'];
const [selectedContentFilters, setSelectedContentFilter] = useState([]);

    useEffect(() => {
      setSelectedContentFilter(
      contentFilters.map((filter, index) => {
        return {
          id: index + 1,
          label: filter,
          checked: false,
        };
      }),
    );
  }, []);

{selectedContentFilters.map((filter) => {
                    return (
                      <DropDownItem key={filter.id}>
                        <CheckboxContainer>
                          <input
                            id={filter.id}
                            type={'checkbox'}
                            onChange={() => {
                              _setSelectedContentFilter(filter.id);
                            }}
                            checked={filter.checked}
                            name={filter.label}
                          />
                          <Label>{filter.label}</Label>
                        </CheckboxContainer>
                      </DropDownItem>
                    );
                  })}

const _setSelectedContentFilter = (id) => {
    let cloneSelectedContentFilter = [...selectedContentFilters];
    cloneSelectedContentFilter = cloneSelectedContentFilter.map((filter) => {
      if (filter.id === id) {
        filter.checked = !filter.checked;
      }
      return filter;
    });
    setSelectedContentFilter(cloneSelectedContentFilter);
  };