React js добавить фильтр - PullRequest
1 голос
/ 14 июля 2020

Я хочу добавить фильтр в массивы фильтров, но все фильтры добавляются в один и тот же массив фильтров. Есть несколько блоков для фильтров, и каждый фильтр нужно добавить в свой массив. Теперь каждый фильтр добавляется в свой массив, но все остальные фильтры также обновляются в этом массиве.

export const DropDownBlock = () => {
  const [filters, setFilters] = useState({
    type: [],
    license: [],
    tag: [],
    format: [],
  });

  const filterKey = Object.keys(item.filters);

  const [checked, setChecked] = useState([]);

  return (
    <section className="filterSection">
      {filterKey.map((f, index) => {
        const filterArray = [];
        const photoItems = photos.map((p) => {
          return p.filters[filterKey[index]];
        });
        photoItems.map((p) => {
          if (filterArray.indexOf(p) < 0) {
            filterArray.push(p);
          }
        });

        const handleFilters = (filters, category) => {
          const newFilters = { ...filters };
          newFilters[category] = filters;

          setFilters(newFilters);
        };

        return (
          <div className="" key={f}>
            <div
              className="dropDownTitleBlock"
              onClick={() => (isOpen ? setIsOpen(false) : setIsOpen(true))}
            >
              {isOpen ? <MdKeyboardArrowDown /> : <MdKeyboardArrowRight />}
              <h5 className="dropDownTitle">{f}</h5>
            </div>

            {isOpen && (
              <div className="dropDownCategoryBlock">
                {filterArray.map((filter) => {
                  switch (f) {
                    case filterKey[index]:
                      return (
                        <Checkbox
                          filter={filter}
                          handleFilters={(filters) =>
                            handleFilters(filters, filterKey[index])
                          }
                          checked={checked}
                          setChecked={setChecked}
                        />
                      );
                  }
                })}
              </div>
            )}
          </div>
        );
      })}
    </section>
  );
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...