[英]Props Match Params Id can't be read and Props.id is Undefined
If I am using const currentUserId = props.id then the error will be props.match is undefined , and the variable "userId" even is undefined when i am trying to console log.如果我使用const currentUserId = props.id那么错误将是props.match is undefined ,当我尝试控制台日志时,变量“userId”甚至是未定义的。
Then, I using props.match.params.id the code can't even being read, it's only blank然后,我使用props.match.params.id代码甚至无法读取,它只是空白
Im also trying to modify the code become const currentUserId = props.computedMatch.params.id;我也在尝试将代码修改为const currentUserId = props.computedMatch.params.id; but nothing works
但没有任何效果
My code:我的代码:
import React, {useContext, useState, useEffect} from 'react';
import { GlobalContext } from '../context/GlobalState';
import { Link, useNavigate } from 'react-router-dom';
import { v4 as uuid } from 'uuid';
import {
Form,
FormGroup,
Label,
Input,
Button
} from 'reactstrap';
export const EditUser = (props) => {
const [selectedUser, setSelectedUser] = useState({
id: '',
name: ''
});
const { users, editUser } = useContext(GlobalContext);
const history = useNavigate();
const currentUserId = props.match.params.id;
useEffect(() => {
const userId = currentUserId;
console.log(typeof userId);
const selectedUser = users.find(user => user.id === Number(userId))
setSelectedUser(selectedUser)
console.log(selectedUser);
}, [currentUserId, users])
const onSubmit = () => {
history('/');
}
const onChange = (e) => {
}
return (
<Form onSubmit={onSubmit}>
<FormGroup>
<Label>Nama</Label>
<Input type='text' onChange={onChange} placeholder='Ganti Nama Disini!'></Input>
</FormGroup>
<Button type='submit'>Edit Data</Button>
<Link to="/" className="btn btn-danger ml-2" style={{ marginLeft: "10px"}}>Cancel</Link>
</Form>
)
}
use withRouter与路由器一起使用
import React, {useContext, useState, useEffect} from 'react'; import { GlobalContext } from '../context/GlobalState'; import { Link, useNavigate } from 'react-router-dom'; import { withRouter } from 'react-router'; // here added import { v4 as uuid } from 'uuid'; import { Form, FormGroup, Label, Input, Button } from 'reactstrap'; const EditUser = (props) => { // here changed const [selectedUser, setSelectedUser] = useState({ id: '', name: '' }); const { users, editUser } = useContext(GlobalContext); const history = useNavigate(); const currentUserId = this.props.match.params.id; useEffect(() => { const userId = currentUserId; console.log(typeof userId); const selectedUser = users.find(user => user.id === Number(userId)) setSelectedUser(selectedUser) console.log(selectedUser); }, [currentUserId, users]) const onSubmit = () => { history('/'); } const onChange = (e) => { } return ( <Form onSubmit={onSubmit}> <FormGroup> <Label>Nama</Label> <Input type='text' onChange={onChange} placeholder='Ganti Nama Disini!'></Input> </FormGroup> <Button type='submit'>Edit Data</Button> <Link to="/" className="btn btn-danger ml-2" style={{ marginLeft: "10px"}}>Cancel</Link> </Form> ) } export default withRouter(EditUser); // here added
i hope this will fix我希望这会解决
import { useParams } from 'react-router-dom';
const { id: currentUserId } = useParams();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.