如何使用鈎子復制 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]);