Мне необходимо сделать живой поиск.
Для этого я получаю список постов из стора Redux
const posts = useSelector(state => state.posts);
Создаю фильтрованный список в стейте компонента
const [state, setState] = useState({
postsFiltered: []
})
Делаю запрос к бекенду, чтобы в Redux появились посты и когда они появляются (2) наполняю стейт компонента этими постами
useEffect(() => {
dispatch(showPosts())
setState(state => ({ ...state, postsFiltered: posts })); ///(2)
}, [dispatch]); (3)
Дальше я вывожу список:
return (
state.postsFiltered.map(post => {
return (
{post.name}
)
})
)
Проблема в том, что посты из Redux не попадают в стейт, я вижу, что стор Redux обновляется три раза (на страницы вызываются еще два экшена).
Так же React настойчиво предлагает добавить posts в массив второго аргумента useEffect (3), а когда я добавлю он начинает бесконечно обновляться.
Как мне правильно перенести данные из редакса в стейт компонента?
UPD: наверное для проформы нужно добавить функцию поиска
const onSearch = (e) => {
const postsFiltered = posts.filter(item => item.name.toLowerCase().includes(e.target.value.toLowerCase()))
setState(state => ({ ...state, postsFiltered }))
}
Текст меняется "на лету" по onChange:
<Search
placeholder="input search text"
onChange={onSearch}
/>
Простой
