如何使用钩子复制 Redux 存储在组件 state 中？

Question

我正在制作实时搜索组件

我收到来自 Redux 的帖子

const posts = useSelector(state => state.posts);

比我在组件 state 中创建 postsFiltered 数组

const [state, setState] = useState({
    postsFiltered: []
  })

从后端获取数据以使它们出现在 redux 中的操作。 当它们出现时 (2) 我将帖子复制到组件 state

useEffect(() => {
    dispatch(showPosts())

    setState(state => ({ ...state, postsFiltered: posts })); ///(2)
  }, [dispatch]); (3)

接下来我展示这个列表：

return (
       state.postsFiltered.map(post => {
              return (
                     {post.name}
              )
       })
)

问题是来自 Redux 的帖子没有出现在组件 state 中。 我看到Redux中的state更新了3次（同一页也有两个动作）。

React 还希望我在 useEffect (3) 的依赖项数组中添加帖子，但是当我添加它时，应用程序开始无限次更新。

如何正确获取从 Redux 到组件 state 的数据？

这里也是 function 我如何过滤搜索结果

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}
        />

Answer 1

您必须对帖子使用 useSelect，对输入中的搜索字符串使用 useState，对过滤后的帖子使用 useMemo。

const posts = useSelect(state => state.posts);
const [search, setSearch] = useState('');
const filtered = useMemo(() => posts.filter(({name}) => name.toLowerCase().includes(search), [search, posts]);