React中JS filter使用!==无法过滤对象数组元素问题排查

过滤失效和useEffect逻辑无关，核心是严格比较时两边数据类型不一致：

• 路由钩子useParams()返回的路径参数默认全是字符串类型，比如路由匹配到/book/2时，拿到的bookId实际是字符串"2"
• 接口返回的书籍数据中，book_id字段是数字类型，和给出的测试数据一致，值为2、14这类数字
• 用!==做严格不等判断时，类型不同的值永远判定为不相等——数字2和字符串"2"不会被识别为同值，所以本该被过滤掉的当前书籍始终留在结果里，最终返回数组和原数组完全一致。

任选一种方式统一比较两边的类型即可：

1. 过滤时将路由参数转为数字

   const otherBooks = booksByAuthor.filter((obj) => {
     return obj.book_id !== Number(bookId)
   })
   

2. 拿到路由参数时就提前转成数字，后续所有用到该id的逻辑都不用重复转类型：

   let { bookId } = useParams()
   const currentBookId = Number(bookId)
   // 后续过滤、接口传参统一用currentBookId即可
   

• booksByAuthor的初始值不建议设为[{}]，首次渲染接口未返回时，这个占位的空对象没有book_id属性，会导致过滤逻辑生成无效条目，初始值设为空数组[]更合理。
• 目前嵌套写的接口请求可以调整为Promise链式调用，避免回调嵌套，也能统一捕获错误：

  useEffect(() => {
    api
      .getBookById(bookId)
      .then((bookInfo) => {
        setbookInfo(bookInfo)
        return api.getBooksByAuthor(bookInfo.author_id)
      })
      .then((books) => {
        setBooksByAuthor(books)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [bookId])
  

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