reactjs“TypeError：无法读取未定义的属性（读取'params'）”答案

【问题标题】：reactjs "TypeError: Cannot read properties of undefined (reading 'params')"reactjs“TypeError：无法读取未定义的属性（读取'params'）”
【发布时间】：2022-07-22 00:21:03
【问题描述】：

我是使用 reactjs 的新手，看起来我正在使用旧版本的 react 路由器遵循旧教程。所以目标是当我想编辑用户详细信息时，表格必须在更新之前填写以前用户的数据。我已经使用 axios 与后端通信，它工作正常，但问题出在“id = props.match.params.id”中。这是我的代码：

UserEdit.tsx

import axios from "axios";
import React, { SyntheticEvent, useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import Wrapper from "../../components/Wrapper";
import { Role } from "../../models/role";

const UserEdit = (props: any) => {
    const [first_name, setFirstName] = useState('');
    const [last_name, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [role_id, setRoleId] = useState('');
    const [roles, setRoles] = useState([]);
    const [redirect, setRedirect] = useState(false);
    let id: number;


    useEffect(() => {
        (
            async () => {
                const response = await axios.get('roles');

                setRoles(response.data);

                id = props.match.params.id;

                const {data} = await axios.get(`users/${id}`);

                setFirstName(data.first_name);
                setLastName(data.last_name);
                setEmail(data.email);
                setRoleId(data.role_id);
            }
        )()
    }, []);

    const submit = async (e: SyntheticEvent) => {
        e.preventDefault();

        await axios.put('users', {
            first_name,
            last_name,
            email,
            role_id
        });

        setRedirect(true)
    }

    if(redirect) {
        return <Navigate to="/users"/>
    }

    return (
        <Wrapper>
            <form onSubmit={submit}>
                <h1 className="h3 mb-3 fw-normal">Edit user</h1>
                <div className="form-floating">
                <input className="form-control" placeholder="First Name" defaultValue={first_name}  onChange={e => setFirstName(e.target.value)} required/>
                <label htmlFor="floatingInput">First Name</label>
                </div>
                <div className="form-floating">
                <input className="form-control" placeholder="Last Name"  defaultValue={last_name} onChange={e => setLastName(e.target.value)}  required/>
                <label htmlFor="floatingInput">Last Name</label>
                </div>
                <div className="form-floating">
                <input type="email" className="form-control" placeholder="Email Address" defaultValue={email} onChange={e => setEmail(e.target.value)} required/>
                <label htmlFor="floatingInput">Email Address</label>
                </div>
                <div className="form-floating">
                <select className="form-control" id="floatingRole" placeholder="Role" value={role_id} onChange={e => setRoleId(e.target.value)} required>
                    {roles.map((r: Role) => {
                        return (
                            <option key={r.id} value={r.id}>{r.name}</option>
                        )
                    })}
                </select>
                <label htmlFor="floatingRole">Role</label>
                </div>
                <button className="w-100 btn btn-lg btn-primary" type="submit">Save</button>

            </form>
        </Wrapper>

    );
};

export default UserEdit;

如下图所示，数据未显示并收到类似这样的错误消息

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')

如果有人想帮助我解决这个问题，我真的很感激，这样我就可以进一步学习。谢谢你

【问题讨论】：

标签： reactjs typescript react-hooks react-router react-tsx

【解决方案1】：

在react-router-dom@6 中不再有“路由道具”，即没有location、history（现在是navigate），也没有match。

使用useParams钩子访问路由路径参数。

...
import { Navigate, useParams } from "react-router-dom";
...

const UserEdit = (props: any) => {
  const { id } = useParams();

  ...

  useEffect(() => {
    (async () => {
      const response = await axios.get('roles');

      setRoles(response.data);

      const { data } = await axios.get(`users/${id}`);

      setFirstName(data.first_name);
      setLastName(data.last_name);
      setEmail(data.email);
      setRoleId(data.role_id);
    })();
  }, []); // <-- add `id` to dependency array if you need to be responsive

  ...

  return (
    ...
  );
};

【讨论】：

【解决方案2】：

您的参数似乎没有正确传递。

也许您需要使用 useParams 获取 URL 参数喜欢文档 (https://v5.reactrouter.com/web/example/url-params) ，或检查您的 React Router 版本中的 Router 组件路径格式是否正确。

在 React 路由器 ^v5.3.0 中：

<Route path="users/:id/edit" />

【讨论】：