Reactjs 使用react router更改页面时不呈现数据

我正在使用

React Router

中的

Link

组件在

Play.tsx

上更改页面。我使用

useffect

从

Firestore

获取数据，如果数组长度大于1，则使用

map

函数在页面上呈现数据。它工作正常，直到我更改页面并返回到渲染play.tsx的

/play

，其中没有任何数据，firestore中的数据正常，但页面上没有渲染任何内容

如果我使用正常的

标记而不是
链接
，则可以正常工作

Play.tsx

const[users，setUsers]=useState（[]）；
//代码。。。
useffect（（）=>{
db.collection（“users”）.orderBy（“points”、“desc”）.limit（10.get（）。然后（（数据：any）=>{
data.forEach（（usr:any）=>{
push（usr.data（））；
console.log（用户）
})
}).catch（（错误）=>{
console.log（“发生错误：”，err.message）
})
}, [])
返回(
{
users.length>=1？
users.map（（d:any）=>{
返回(
{d.username}{d.pro？：null}

{d.points}点，{d.rank}（{d.races}测试）
)
})
: 
}
)

OtherComponent.tsx

主页

我的路线：Play.tsx（已渲染数据）->OtherComponent.tsx->Play.tsx（未渲染数据）

注意：问题不在数据本身，因为我可以控制台。记录它，问题在DOM，就像
users
上的map函数没有调用一样

注2：我有一个条件，如果数组中有多个用户，它将映射，如果没有，它将显示一个微调器，但当我返回到
Play.tsx
时，这些都不会被渲染，并且不会出现任何错误。
在useEffect钩子中，通过执行
users.push（usr.data（））

应该使用useState钩子中的setUsers函数

useEffect(() => {
  db.collection("users").orderBy("points", "desc").limit(10).get().then((data: any) => {
     data.forEach((usr: any) => {
         setUsers((prevState)=> ([...prevState, usr.data()]));
         console.log(users)
     })
   }).catch((err) => {
         console.log("An error has occured: ", err.message)
   })
}, [])

尝试更改，看看状态是否正常运行
哦，谢谢，伙计，我不认为使用push会导致该错误，如果你可以编辑并更改
setUsers（（prevState）=>（[…prevState，usr.data（）]）
，以防万一有人有同样的问题。完成了，很高兴它成功了！
  <Link to="/play"><li>Home</li></Link>

useEffect(() => {
  db.collection("users").orderBy("points", "desc").limit(10).get().then((data: any) => {
     data.forEach((usr: any) => {
         setUsers((prevState)=> ([...prevState, usr.data()]));
         console.log(users)
     })
   }).catch((err) => {
         console.log("An error has occured: ", err.message)
   })
}, [])