React列表项点击跳转对应页面报错，请求技术帮助

刚接触React+Redux技术栈，在项目中映射列表项时，想要实现点击每个列表项跳转到对应页面，但操作时出现报错，相关代码如下：

import React, { useEffect, useState } from "react";
import ItemsData from "../components/Item";
import { useDispatch, useSelector } from "react-redux";
import { getAllItems } from "../actions/itemActions";
import "./Homepage.css";
export default function Homepage() {
  const dispatch = useDispatch(); // 通过该变量分发action

  const itemsstate = useSelector((state) => state.getAllItemsReducer);
  // 解构变量
  const { items, error, loading } = itemsstate; // 借助这些变量可以追踪加载状态、错误状态，以及是否获取到列表数据
  useEffect(() => {
    dispatch(getAllItems());
  }, []);

  return (
    // 使用条件渲染
    <div>
      <div className="row">
        <div className="col-12 px-0 d-flex flex-lg-row flex-md-row flex-column justify-content-between flex-wrap">
          {loading ? (
            <h1>Loading...</h1>
          ) : error ? (
            <h1>Something went Wrong </h1>
          ) : (
            items.map((items) => {
              // 数据来自后端
              return (
                <div className="col-md-4" key={items._id}>
                  <div>
                    <ItemsData items={items} />
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

问题排查与解决方案 #

1. 确认路由依赖与配置是否完整

实现页面跳转必须依赖react-router-dom，先确保已安装并正确配置：

• 安装依赖：

  npm install react-router-dom
  # 或
  yarn add react-router-dom
  

• 在根组件（如App.js）中配置路由容器与路由规则：

  import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
  import Homepage from './path/to/Homepage';
  import ItemDetailPage from './path/to/ItemDetailPage'; // 你的详情页组件
  
  function App() {
    return (
      <Router>
        <Routes>
          <Route path="/" element={<Homepage />} />
          {/* 配置列表项对应的详情页路由，:id为动态参数 */}
          <Route path="/item/:id" element={<ItemDetailPage />} />
        </Routes>
      </Router>
    );
  }
  

2. 给列表项添加跳转逻辑

当前代码仅将数据传递给ItemsData组件，未添加跳转逻辑，需在ItemsData组件中实现：

• 方式一：使用Link组件（声明式路由，推荐）

  // ItemsData.js
  import { Link } from 'react-router-dom';
  
  export default function ItemsData({ items }) {
    return (
      {/* 跳转到对应详情页，携带item的_id作为参数 */}
      <Link to={`/item/${items._id}`} className="item-card">
        {/* 渲染列表项内容，示例： */}
        <h3>{items.title}</h3>
        <p>{items.description}</p>
      </Link>
    );
  }
  

• 方式二：使用useNavigate钩子（命令式路由，适合需先处理逻辑再跳转的场景）

  // ItemsData.js
  import { useNavigate } from 'react-router-dom';
  
  export default function ItemsData({ items }) {
    const navigate = useNavigate();
  
    const handleItemClick = () => {
      // 可在此添加点击前的逻辑（如埋点、数据校验等）
      navigate(`/item/${items._id}`);
    };
  
    return (
      <div className="item-card" onClick={handleItemClick} style={{ cursor: 'pointer' }}>
        <h3>{items.title}</h3>
        <p>{items.description}</p>
      </div>
    );
  }
  

3. 避免数组map时的undefined报错

即使有loading和error判断，若items初始状态为undefined，map时仍会报错，可添加可选链操作符兜底，同时避免变量名重名：

items?.map((item) => { // 将循环变量名改为item，避免和外层items数组混淆
  return (
    <div className="col-md-4" key={item._id}>
      <div>
        <ItemsData items={item} />
      </div>
    </div>
  );
})

4. 检查Redux reducer的初始状态

确保getAllItemsReducer的初始状态中items为数组，而非undefined：

// 示例reducer代码
const initialState = {
  items: [], // 初始值设为空数组
  loading: false,
  error: null
};

function getAllItemsReducer(state = initialState, action) {
  switch(action.type) {
    case 'GET_ITEMS_REQUEST':
      return { ...state, loading: true };
    case 'GET_ITEMS_SUCCESS':
      return { ...state, loading: false, items: action.payload };
    case 'GET_ITEMS_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
}

内容的提问来源于stack exchange，提问作者sandhya sandy