React中matchUrl变量变化时如何更新useState 路由跳转后状态保留旧值

数据老陈

2026-10-7

问题根因

useState 的初始值仅在组件首次挂载时计算赋值一次，后续组件因props变化重新渲染时，不会自动更新state的取值。你场景中路由跳转后match.params.name发生变化，组件重新渲染但listNames状态仍保留首次挂载时的旧值，因此出现不同步的问题。

解决方案

添加useEffect监听matchUrl的变化，当路由参数更新时主动重置listNames的状态值，同时修正原代码中的语法错误即可，修改后的完整代码如下：

import React, {useState, useEffect} from 'react'
import useInfinityScroll from './hooks/useInfinityScroll'
// 修正拼写错误 form -> from
import names from './data/names'    

function TableList({ match }) {
   let matchUrl = match.params.name

   const dataMatch = names.filter(name => name.occupation === matchUrl)

   const [listNames, setListNames] = useState(dataMatch.slice(0, 10))

   const [isFetching, setIsFetching] = useInfinityScroll(fetchMoreListItems) 

   // 新增useEffect监听matchUrl变化，同步更新state
   useEffect(() => {
     setListNames(dataMatch.slice(0, 10))
   }, [matchUrl])

   function fetchMoreListItems() {
    // 修正语法错误 缺少箭头函数标识
    setTimeout(() => {
      setListNames([...dataMatch.slice(0, 20)])
      setIsFetching(false)
    }, 2000)
   }

   return (
     <>
       <h1>{matchUrl}</h1>
       <div>
         {listNames.map(item => <Table key={item.id} name={item} />)}
       </div>
     </>
   )
}

export default TableList