JS Filter不会根据!==条件从对象数组中过滤出元素

Question

不确定我在这里做错了什么-这可能与我如何使用useEffect()有关，但我不清楚如何修复它。从本质上讲，我在一个对象数组上运行.filter，并试图制作一个不包括数组中特定元素的过滤数组。我对使用React和useEffect()很陌生，所以我认为麻烦可能来自那里?

数据如下:

[
{
author: 2
blurb: lorem ipsum
book_id: 2
cover_image: x
genre: "Literary Fiction"
id: 2
pub_year: 2020
title: "Shuggie Bain"
},
{
author: 2
blurb:  lorem ipsum
book_id: 14
cover_image: x
genre: "Literary Fiction"
id: 14
pub_year: 2022
title: "Young Mungo"
}
]

代码如下:

export default function BookPage() {
let { bookId } = useParams()
const [bookInfo, setbookInfo] = useState({})
const [booksByAuthor, setBooksByAuthor] = useState([{}])
useEffect(() => {
api
.getBookById(bookId)
.then((bookInfo) => {
setbookInfo(bookInfo)
api.getBooksByAuthor(bookInfo.author_id).then((books) => { //data above
setBooksByAuthor(books)
return null
})
})
.catch((err) => {
console.log(err)
})
}, [bookId])
const otherBooks = booksByAuthor.filter((obj) => {
return obj.book_id !== bookId
})
[...]

这返回上面的数组一样,所以不过滤值相匹配的条件。

Answer 1

这通常是因为useState需要毫秒来更新，所以最好在相同的函数中执行过滤器，然后将最终值赋给状态

api
.getBookById(bookId)
.then((data) => {
setbookInfo(data)
api.getBooksByAuthor(data.author_id).then((books) => { //data above
const newArray = books.filter(obj => obj.book_id !== bookId);
setBooksByAuthor(newArray)
})
.catch((err) => {
console.log(err)
})

还要注意你的"bookinfo"变量重复，不建议这样做。

Answer 2

也许book id是一个字符串和对象。Book_id是一个数字?