React同模式子路由跳转时map方法无法渲染列表数据问题

根因说明 #

同属于/category/:name路由规则下的跳转，React Router会默认复用CategoryScreen组件实例，不会重新执行组件挂载逻辑。你看到h3标题正常更新，说明match.params.name参数已经正确变更，map没有渲染新内容通常是以下2个常见原因导致：

1. map遍历的子项未添加唯一key，React的Diff算法认为列表没有变化，跳过了更新
2. 路由参数和Products数据中的SubCategory字段存在大小写、空格等差异，全等匹配过滤不到结果

修复方案 #

方案1：修复遍历key+优化过滤规则（推荐） #

修改categoryScreen.js代码：

import React from 'react'
import Product from '../components/Product'
import Products from '../data/Products'


function CategoryScreen({ match }) {
    const ProductMatch = match.params.name

    return (
        <>
            <h3>{ProductMatch}</h3>

            <div className="category-products">
                {Products.filter(product => 
                    // 统一转小写并去除两端空格，避免大小写/空格导致匹配失败
                    product.SubCategory.trim().toLowerCase() === ProductMatch.trim().toLowerCase()
                  // 给map遍历项添加唯一key，这里用产品id即可，没有id可以用其它唯一字段
                  ).map((product) => (
                    <Product product={product} key={product.id} />
                  ))
                }
            </div>

        </>
    )
}

export default CategoryScreen

方案2：强制路由切换重新挂载组件 #

如果需要彻底避免组件复用带来的更新问题，可以修改app.js的分类路由，给Route添加和路径绑定的key，路径变化时自动销毁旧组件、创建新组件：

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import HomeScreen from './Screens/HomeScreen'
import CategoryScreen from './Screens/CategoryScreen'
import AboutScreen from './Screens/aboutScreen'

const App = () => {
  return (
    <Router>
      <Route path='/' component={HomeScreen} exact />
      {/* 新增key属性，路径变化时强制重新挂载组件 */}
      <Route path='/category/:name' component={CategoryScreen} key={window.location.pathname} />
      <Route path='/about' component={AboutScreen} />
    </Router>
  )
}

export default App

调试方法 #

如果修改后仍有问题，可以在CategoryScreen组件内加日志排查：

const ProductMatch = match.params.name
// 控制台打印参数和所有子分类，确认是否匹配
console.log('当前分类参数：', ProductMatch)
console.log('所有产品子分类列表：', Products.map(item => item.SubCategory))

打开浏览器控制台即可看到是否存在参数和数据不匹配的情况。

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