删除评论后，如何通过 has_many :trails、通过: :reviews 关联正确更新 React 中的用户状态？

Question

Users

有很多

reviews

，还有很多

trails

到

reviews

，反之亦然。

目标：

在
```
user
```
个人资料页面上，呈现
```
trails
```
已审阅的
```
user
```
姓名列表，而不重复任何
```
trail
```
姓名。例如，如果
```
user
```
多次查看
```
trail
```
，则它应该只显示
```
trail
```
名称一次。如果
```
user
```
多次查看了
```
trail
```
，并删除了其中一个
```
reviews
```
，则列表仍应显示
```
trail
```
名称。如果该
```
user's
```
的所有
```
reviews
```
```
trail
```
已被删除，则应从渲染列表中删除
```
trail
```
名称。
删除
```
review
```
时，更新前端
```
user
```
状态，以便
```
user.reviews
```
和
```
user.trails
```
准确，而无需发出
```
GET
```
请求。

我尝试过的：

从

set

创建一个由独特的

trail

名称组成的

user.trails

，然后通过映射它们来在 JSX 中渲染它们

const uniqTrailNames = [...new Set(user.trails.map((trail) => {
  return trail.name
}))]

{(uniqTrailNames.map((name) => {
  return <p key={name}>{name}</p>
}))}

这成功地从

trail

已审阅的

trails

中呈现了独特的

user

名称列表。然而，当

setUser

被删除时，我很难正确地

review

状态。

目前，我的

handleDelete()

函数成功销毁了数据库中的

review

，然后调用

setUser

来更新

user.reviews

和

user.trails

，但这就是我错误地更新

trails

属性的地方。以这种方式过滤会删除 id 与关联的

user.trails

匹配的所有

review's

对象，因此即使

trail_id

具有

user

的另一个

review

，

trail

名称也不会呈现，因为

trail

中不再存在

trails

。如果

user.trails

对象本质上相同，如何在删除

trail

时仅删除单个

review

对象，以便

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)
        })
    }

删除评论后，如何通过 has_many :trails、通过: :reviews 关联正确更新 React 中的用户状态？

问题描述投票：0回答：1

1个回答

最新问题

删除评论后，如何通过 has_many :trails、通过: :reviews 关联正确更新 React 中的用户状态？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1