React组件无法通过Props获取id属性的问题求助

你的核心问题是React Router版本不兼容导致路由参数id无法正确获取，进而触发Axios请求时因为id为undefined产生网络错误。具体原因：

• 旧版React Router（v5及更早）中，类组件可以通过this.props.match.params.id获取路由参数，但v6完全移除了props.match这个属性。
• 讲师提供的this.props.params.id是错误的，v6默认不会将路由参数直接注入组件props，所以直接访问会导致组件崩溃。

方案1：转为函数组件（推荐，适配React Router v6） #

React v6更推崇函数组件+hooks的写法，用useParams钩子可以直接获取路由参数，代码更简洁：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import moment from 'moment';
import AuthenticationService from './路径/到/AuthenticationService';
import TodoDataService from './路径/到/TodoDataService';

const TodoComponent = () => {
  // 直接从路由获取id参数
  const { id } = useParams();
  const [todoState, setTodoState] = useState({
    description: "",
    targetDate: moment(new Date()).format("YYYY-MM-DD"),
  });

  useEffect(() => {
    // 仅当id存在时发起请求
    if (!id) return;

    const fetchTodoDetail = async () => {
      try {
        const username = AuthenticationService.getLoggedInUserName();
        const response = await TodoDataService.retrieveTodo(username, id);
        setTodoState({
          description: response.data.description,
          targetDate: moment(response.data.targetDate).format("YYYY-MM-DD"),
        });
      } catch (err) {
        console.error('获取待办详情失败:', err);
      }
    };

    fetchTodoDetail();
  }, [id]); // 监听id变化，参数更新时重新请求

  const onSubmit = (e) => {
    e.preventDefault();
    // 你的提交逻辑，使用todoState中的数据
  };

  return (
    {/* 你的组件JSX结构 */}
  );
};

export default TodoComponent;

方案2：用高阶组件包装类组件（保留类组件写法） #

如果不想重构为函数组件，可以自己实现withRouter高阶组件，把路由参数注入类组件的props：

第一步：实现withRouter高阶组件 #

// 新建withRouter.js文件
import { useParams, useNavigate, useLocation } from 'react-router-dom';

export const withRouter = (Component) => {
  const RouterWrapper = (props) => {
    const params = useParams();
    const navigate = useNavigate();
    const location = useLocation();
    // 将路由相关属性注入组件props
    return <Component {...props} params={params} navigate={navigate} location={location} />;
  };
  return RouterWrapper;
};

第二步：修改TodoComponent #

import { Component } from 'react';
import moment from 'moment';
import { withRouter } from './withRouter'; // 导入自定义的withRouter
import AuthenticationService from './路径/到/AuthenticationService';
import TodoDataService from './路径/到/TodoDataService';

class TodoComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      description: "",
      targetDate: moment(new Date()).format("YYYY-MM-DD"),
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  componentDidMount() {
    // 直接从props.params获取id，无需存到state（避免props更新时state不同步）
    const { id } = this.props.params;
    if (!id) return;

    const username = AuthenticationService.getLoggedInUserName();
    TodoDataService.retrieveTodo(username, id)
      .then((response) => {
        this.setState({
          description: response.data.description,
          targetDate: moment(response.data.targetDate).format("YYYY-MM-DD"),
        });
      })
      .catch((err) => {
        console.error('请求失败:', err);
      });
  }

  // 其他组件方法...

  render() {
    return (
      {/* 你的组件JSX结构 */}
    );
  }
}

// 用withRouter包装组件，才能拿到params
export default withRouter(TodoComponent);

关键注意事项 #

1. 不要把路由参数存到state：路由参数属于外部传入的props，直接使用this.props.params.id比存到state更可靠，避免props更新但state未同步的问题。
2. 请求前判断参数是否存在：确保id不为undefined再发起Axios请求，避免无效请求触发错误。

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