在(已筛选的)搜索列表中仅使用一个useState挂钩

Question

在ArticlePage.js中，在我当前的设置中，我使用多个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]);