为什么console.log可正常打印postid，但使用filter过滤时却不生效？

问题根源 #

react-router-dom 中 useParams 返回的所有路由参数默认都是字符串类型，你从 easybase 数据库查询到的 task.id 是数字类型，=== 严格相等运算符会同时校验值和数据类型，因此 1 === "1" 的判断结果为 false，导致过滤不出匹配结果。你控制台看到的 postid 打印值看似是数字1，实际是字符串格式的 "1"，可以通过 console.log(typeof postid) 验证，输出结果为 string。

修复方案 #

任选以下一种修改过滤条件即可：

• 将路由拿到的postid转为数字类型再比较

  .filter((task) => task.id === Number(postid))
  

• 将数据库拿到的id转为字符串类型再比较

  .filter((task) => String(task.id) === postid)
  

• 可选优化：你当前的useEffect使用空依赖数组，若后续存在路由参数动态变化的场景，建议将postid加入依赖数组，确保参数变化时会重新执行逻辑：

  useEffect(() => {
    getPosts();
    setIdState(postid);
    console.log(postid);
  }, [postid]);
  

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