Блог

Я создаю выпадающий фильтр для обновления результатов поиска страницы с помощью реактивных перехватов. По сути, я передаю массив с параметрами, которые пользователь выбрал из выпадающего меню. Я успешно обновляю глобальное состояние новыми массивами, НО моя проблема в том, что useState создает НОВЫЙ массив вместо слияния результатов с предыдущим состоянием.

Выше вы можете видеть, что я сделал два вызова с разными параметрами фильтра, и глобальное состояние теперь содержит 2 массива. Моя цель — объединить оба массива в один.

Это функция, в которой обновляется глобальное состояние.

 const Results = () => {
    const [filterList, setFilterList] = useState([])

    const setGlobalFilter = (newFilter) => {
        let indexFilter = filterList.indexOf(newFilter);

        // console.log("Top level index", indexFilter)

        indexFilter ?
        setFilterList([...new Set([...filterList, newFilter])]) :
        setFilterList(filterList => filterList.filter((filter, i) => i !== indexFilter))
    }

    // console.log("TopFilterSelection:", filterList)
    return (
        <div>
            <Filter setFilter={(filterList) => setGlobalFilter(filterList)}/>
        </div>
    )
}
  

Я проверял использование prevState следующим образом:

 ...
        setFilterList(prevState => [...new Set([...prevState, newFilter])]) :
...
  

Но я не знаю, что я делаю не так.
Любые отзывы будут высоко оценены!

Это происходит потому newFilter , что это массив, а не слово. Должно быть

 setFilterList(previous => [...new Set([...previous, ...newFilter])])
  

Также это

 let indexFilter = filterList.indexOf(newFilter);
  

всегда возвращает -1, если newFilter это массив (поскольку вы каждый раз отправляете новый массив), это не ложное значение, будьте осторожны

Используйте .concat метод.

 setFilterList(filterList.concat(newFilter))
  

Подробнее об этом читайте здесь:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat