求助大佬， React 严格模式+函数式`setState`导致 key 重复

我有一个列表，我希望每次 ajax 请求获取一页数据后，将新的一页数据追加到列表当中。

在组件挂载时，我希望读取第一页的内容。简化后的代码可以写成这样：

import {useEffect, useState} from "react";

interface User {
    id: number
    name: string
}

const pageData = [
    {id: 1, name: '张三'},
]
export default function App() {
    const [users, setUsers] = useState<User[]>([])
    const fetchUsers = async () => {
        const page = pageData // 异步获取到数据
        setUsers([...users, ...page])
    }
    useEffect(() => {
        fetchUsers() // 发送异步请求
    }, [])
    // 渲染列表
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    )
}

这样不会有任何问题。

但是今天我问 ChatGPT 的时候，他给了我这么个回答。

我觉得有点道理。所以我就在想，我是往列表里追加数据，那肯定是依赖于前一个状态的。因此我就把代码从

setUsers([...users, ...page])

改成了

setUsers(prevUsers=>[...prevUsers, ...page])

完整代码：

import {useEffect, useState} from "react";

interface User {
    id: number
    name: string
}

const pageData = [
    {id: 1, name: '张三'},
]
export default function App() {
    const [users, setUsers] = useState<User[]>([])
    const fetchUsers = async () => {
        const page = pageData // 异步获取到数据
        setUsers(prevUsers=>[...prevUsers, ...page])
    }
    useEffect(() => {
        fetchUsers() // 发送异步请求
    }, [])
    // 渲染列表
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
    )
}

但这时候就出现了报错：

列表的数据追加了两次，key 也重复了。

我立马想到 React 的严格模式，果然关闭了，就又正常了：

到目前为止，我确实可以简单地

把 useState 改回去
关闭严格模式

以解决这个问题。

但是我觉得使用函数式的 setState 其实并没有太大问题，而 React 的严格模式又是官方推荐的。这俩者结合到一起，咋就出问题了呢？望大佬指点，是不是我使用的方式有问题。

XCFOX

2024-01-06 01:08:20 +08:00

我认为应该根据 key 对 users 做去重。

假如有一个最新用户列表和一个 [加载更多用户] 按钮，页面不按页码分页，每次点击按钮时直接把下一页数据塞进当前列表里。

假如在第一次数据加载后过了一段时间再去点击 [加载更多用户] ，在这一段时间内可能会新的用户，此时用户列表内的 key 就会碰撞。

举例来说，假如每页取 3 项：
第一次加载第一页用户为: [张三, 张四, 张五]；
新用户张一、张二注册，此时数据库中最新的 6 个用户为: [张一, 张二, 张三, 张四, 张五,张六]；
第二次加载第二页用户为: [张四, 张五, 张六]，此时前端用户列表为 [张三, 张四, 张五, 张四, 张五,张六] ，其中张四, 张五为重复数据；

既然无法避免重复，那就对列表做去重处理。

```tsx
const fetchUsers = useCallback(async () => {
const page = pageData // 异步获取到数据
setUsers((prevUsers) => {
const newUsers = page.filter(
(user) => !prevUsers.find((u) => u.id === user.id)
)
return [...prevUsers, ...newUsers]
})
}, [])
```