удаление значения из массива не работает NEXT. JS - PullRequest
Новая
       3

удаление значения из массива не работает NEXT. JS

0 голосов
/ 12 июля 2020

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

const [showFilter, setFilter] = useState([]);

useEffect(() => {
    dispatch(fetchproducts(slug, sort, pageInitial+1, showFilter));
    console.log(showFilter);
}, [showFilter]);

function filterClick (id, title) {
    const index = showFilter.indexOf(id);

    if (index > -1)
        setFilter(showFilter.splice(index, 1));
    else
        setFilter(showFilter.concat(id));
}

return (
    <ul style={{display: showMe.includes(index) ? "block" : "none"}}>
        {item.items.map((single, index1) => (
            <li key={index1}>
                <label><input type="checkbox" name="checkbox" onClick={(e) => filterClick(e.target.value, item.title)} value={single.items_id}/> {single.items_value}</label>
            </li>
        ))}
    </ul>
)

В приведенном выше коде вставка массива работает, но стыковка не работает и состояние не обновляется.

Как изменить мой код, чтобы получить ожидаемый результат.

Ответы [ 2 ]

1 голос
/ 12 июля 2020

Вы используете useEffect. Обратный вызов useEffect будет срабатывать при изменении одной из зависимостей.

splice функция изменяет массив на месте (ie изменяет массив). В этом случае ваша переменная массива (showFilter) не изменяется, поэтому обратный вызов useEffect не будет запущен.

Попробуйте вместо этого использовать функцию filter: 

setFilter(showFilter.filter(el=> el !== id));
1 голос
/ 12 июля 2020

Splice изменяет исходный массив, что не считается хорошей практикой в ​​React. Используйте slice или` filter .

Используя slice, ваш код будет выглядеть так: 

setFilter(showFilter.slice(index, index + 1))
...