React中useEffect内filter执行完前打印空数组，博客id匹配赋值失败如何解决

问题原因 #

• 你写的useEffect依赖项是空数组，只会在组件首次挂载时执行1次。如果BlogDataContext中的博客数据是异步获取的（比如从接口请求回来），组件首次挂载时context大概率还是空数组，此时filter执行的结果自然是空数组。
• filter是同步方法，不存在没执行完就打印的情况，你看到的打印是空的本质是触发useEffect执行的时机太早，此时还没有拿到完整的上下文数据，后续上下文更新后useEffect没有重新触发执行。

修复方案 #

把context和Id都加入useEffect的依赖数组，只要上下文数据或者路由ID变化，就会重新执行匹配逻辑，拿到正确的结果。另外如果你的ID是唯一的，建议用find替代filter，直接返回匹配到的单个博客对象，不用处理数组。

修改后的代码如下：

import React, { useContext, useEffect, useState } from "react";
import { BlogDataContext } from "../contexts/BlogDataContext";

export default function BlogPage({ match }) {
  const Id = match.params.id;
  const context = useContext(BlogDataContext);
  const [Blog, setBlog] = useState();
  // 补充依赖项，上下文或ID变化时重新执行匹配
  useEffect(() => {
    const matchedBlog = context.find((b) => b._id === Id);
    console.log(matchedBlog);
    setBlog(matchedBlog);
  }, [context, Id]);

  // 可选：补充加载状态避免未匹配到数据时报错
  if (!Blog) return <div>加载中...</div>

  return (
    <div style={{ color: "red" }} className="BlogPage">
      hello
    </div>
  );
}

内容的提问来源于stack exchange，提问作者user14851171