Next.js中打开模态框刷新后数据重复问题求助

问题根源 #

你定义的myValue是组件内部的普通变量，每次组件重新渲染（比如打开模态框触发openDelete状态更新、页面刷新）时，这个变量会被重新初始化，但之前的myValue因闭包特性会保留旧数据，导致每次调用getCategory都会重复往里面push新获取的数据，最终category状态里就会出现重复项。

修复方案 #

1. 移除外部变量myValue，直接用接口数据更新状态 #

修改getCategory函数，不再依赖外部普通变量存储数据，直接将接口返回的新数据覆盖状态：

const [category, setCategory] = useState([]) // 初始化为空数组，避免undefined

const getCategory = async () => {
    const id = window.localStorage.getItem('categoryId')
    try {
        const res = await axios.get(`${API_URL}/categories/${id}`, {
            headers: {
                Authorization: token,
                Accept: 'application/json'
            },
        })
        // 直接用接口返回的新数据覆盖状态，不再累加
        setCategory([res.data.data])
        // 如果接口返回的本身是数组，直接写setCategory(res.data.data)即可
    } catch (err) {
        console.log(err)
    }
}

2. 确保getCategory仅在组件挂载时调用一次 #

用useEffect包裹调用逻辑，避免重复触发数据请求：

import { useEffect } from 'react'

useEffect(() => {
    getCategory()
}, []) // 空依赖数组，仅组件挂载时执行一次

3. 模态框状态不影响数据逻辑 #

你的模态框状态openDelete仅控制模态框显示，不会直接导致数据重复，只要修复上述数据获取逻辑，打开模态框后再刷新页面就不会出现重复数据了。

内容的提问来源于stack exchange，提问作者Fazliddin Abdurakhmonov