Next.js+React项目使用array map渲染列表旧数组未被替换问题

问题原因 #

1. useEffect依赖项配置错误：代码中useEffect的依赖数组填写了未定义的ProductMatch变量，路由参数matchName变化时不会触发状态更新逻辑。
2. 未处理Next.js路由初始化逻辑：router.query在路由未完全就绪时会返回空值，首次过滤得到的结果不符合预期，且后续路由就绪后没有重新执行过滤。
3. 列表渲染未添加唯一key属性：React列表渲染时缺少唯一key会导致DOM节点异常复用，即便状态值正确，渲染结果也会出现新旧内容叠加的问题。
4. 原代码存在JSX语法错误：列表渲染的map逻辑没有包裹在JSX表达式符号{}中，且渲染内容直接写了固定文本而非变量值。

修正后代码 #

// 导入缺失的React hooks
import { useState, useEffect } from 'react'
import { useRouter } from 'next/router'
import array from './array'

function Page1() {
  const router = useRouter()
  const matchName = router.query.name
  const [listItems, setListItems] = useState([])

  useEffect(() => {
    // 路由未就绪时不执行逻辑
    if (!router.isReady) return
    const filteredList = array.filter(item => item.category === matchName)
    // 若需要取前3条可以加.slice(0,3)，全量渲染直接用filteredList即可
    setListItems(filteredList)
  }, [router.isReady, matchName]) // 依赖改为路由就绪状态和动态参数matchName

  return (
    <>
      {/* 列表项添加唯一key，正确渲染变量内容 */}
      {listItems.map(item => <p key={item.title}>{item.title}</p>)}
    </>
  )
}

export default Page1

内容的提问来源于stack exchange，提问作者shanksu 218