ERD for my APIUsers
具有许多reviews
,以及许多trails
到reviews
,反之亦然。
目标:
1.在user
配置文件页上,呈现user
已审阅过的trails
名称列表,但不重复任何trail
名称。例如,如果user
已多次查看trail
,则应仅显示trail
名称一次。如果user
多次查看trail
,并删除其中一个reviews
,则列表仍应显示trail
名称。如果已删除该trail
的所有user's
reviews
,则应从呈现列表中删除trail
名称。
1.删除review
时,更新前端user
状态,使user.reviews
和user.trails
准确,而无需请求GET
。
我尝试过的:
从user.trails
创建一个set
唯一的trail
名称,然后通过Map它们在JSX中呈现它们
const uniqTrailNames = [...new Set(user.trails.map((trail) => {
return trail.name
}))]
个字符
这成功地从user
审阅过的trails
中呈现了trail
名称的唯一列表。然而,当一个review
被删除时,我正在努力setUser
状态正确。
目前,我的handleDelete()
函数成功地销毁了数据库中的review
,然后调用setUser
来更新user.reviews
和user.trails
,但这就是我错误地更新trails
属性的地方。这种过滤方式会删除所有id匹配review's
关联trail_id
的user.trails
对象,因此即使user
有trail
的另一个review
,trail
名称也不会呈现,因为trails
不再存在于user.trails
中。在删除review
时,如何只删除一个trail
对象,以便user.trails
保持准确,如果trail
对象基本相同?我是不是走错路了?展示完整的has_many
through
关系是我的项目要求的一部分,所以这就是我迄今为止采用这种方法的原因。
import { useContext } from 'react'
import { UserContext } from '../contexts/UserContext'
import { TrailsContext } from '../contexts/TrailsContext'
import { NavLink } from 'react-router-dom'
function UserTrailReview({ review }) {
const {user, setUser} = useContext(UserContext)
const {trails, setTrails} = useContext(TrailsContext)
const {
id,
trail_id,
trail_rating,
condition,
content,
formatted_date,
trailname
} = review
const trail = trails.find((trail) => {
return trail.id === trail_id
})
function handleDelete() {
fetch(`/reviews/${id}`, {
method: "DELETE"
})
.then(setUser({
...user,
reviews: user.reviews.filter((review) => {
return review.id !== id
}),
trails: user.trails.filter((trail) => {
return trail.id !== trail_id
})
}))
.then(() => {
trail.reviews = trail.reviews.filter((review) => {
return review.id !== id
})
const updatedTrails = trails.map((t) => {
if (t.id === trail_id) {
return trail
} else {
return t
}
})
setTrails(updatedTrails)
})
}
型
1条答案
按热度按时间xyhw6mcr1#
这就是我的解决方案。
1.从user.reviews中删除评论。
1.检查是否有用户对同一线索的任何其他评论。
1.根据是否存在相同线索的其他评论更新user.trails。
1.设置更新的user.trails。
字符串