在（过滤的）搜索列表中仅使用一个 useState 挂钩

Question

在ArticlePage.js 中，在我当前的设置here 中，我使用多个useState() 挂钩来呈现和过滤我的帖子列表：

const [posts, setPosts] = useState([]);
const [filteredPosts, setFilteredPosts] = useState([]);

我想知道，重构和优化这段代码，我是否也只有（而不是上面两个）？：

const [filteredPosts, setFilteredPosts] = useState([]);

我只希望组件重新渲染：

• 如果帖子数量发生变化
• 如果在搜索输入中键入的值发生变化

我认为我的设置没问题，但我想知道我是否可以改进它？

Answer 1

我会替换

const [filteredPosts, setFilteredPosts] = useState([]);

与

const filteredPosts = useMemo(
    () => posts.filter((post) => post.title.toLowerCase().includes(search.toLowerCase())),
    [search, posts]
);

并删除

  useEffect(() => {
    setFilteredPosts(
      posts.filter((post) => {
        return post.title.toLowerCase().includes(search.toLowerCase());
      })
    );
  }, [search, posts]);