确认数组数据存在仍报Cannot read property 'includes' of undefined错误如何解决

• 控制台打印引用类型存在惰性求值特性。你在filter执行前打印的props.allPosts是引用类型，打印时异步数据可能还未完成赋值，此时部分文章对象的categories字段为undefined。等你手动在控制台展开查看打印结果时，异步请求已经执行完毕，categories字段已经被填充，所以会出现你看到有该字段但代码执行报错的矛盾情况。
• 部分文章数据本身未携带categories字段。比如数据库中部分旧文章没有设置分类，查询返回时就不会携带该字段，遍历到这类数据时访问post.categories会得到undefined，调用includes方法自然会抛出错误。

修改过滤逻辑，先校验categories字段存在且为数组，再执行匹配判断，代码修改如下：

function RenderFilteredList(props) {
  console.log(props.allPosts);
  let filteredPosts = props.allPosts.filter((post, index) =>
    // 先判断类型，避免对undefined调用方法报错
    Array.isArray(post.categories) && post.categories.includes(props.category)
  );

  return (
    <div className="posts-grid">
      {filteredPosts &&
        filteredPosts.map((post, index) => (
          <div className="grid-post-card" key={post.slug.current}>
            <Link to={"/" + post.slug.current}>
              <img
                className="grid-image"
                src={urlFor(post.featuredImage).width().url()}
                alt=""
              />
              <p className="grid-post-title">{post.title}</p>
              <p className="grid-post-author">
                {post.name + " - " + post.date}
              </p>
            </Link>
          </div>
        ))}
    </div>
  );
}

也可以用ES2020新增的可选链+空值合并运算符简化判断：
post.categories?.includes(props.category) ?? false

如果是异步数据加载时序导致的问题，也可以在父组件渲染RenderFilteredList时加判断，等数据完全加载完成再挂载组件，从根源避免无值场景。

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