React Router 的匹配参数出现然后随着表单提交调用消失
React Router's match param appears and then disappears with form submission call
我正在使用 React、React Router、Firebase 和语义 UI React 组件。在我的路线组件的初始渲染中,当我 console.log 'this.props' 时参数 'church_id' 存在 - 它应该存在。但是,在单击 'Add' 按钮提交表单后,我收到错误消息:
Cannot read property match of undefined
就好像'this.props.match.params.church_id'消失了一样。这是由于在提交表单后对组件进行了额外的重新渲染吗?我正在使用 'e.preventDefault()' 来防止重新渲染,所以我不确定如何继续。任何帮助将不胜感激!
这是呈现表单的组件:
import React from 'react';
import {
Grid, Message, Button,
Segment, Container, Header,
Form
} from 'semantic-ui-react';
import database from '../../firebase/firebase';
export default class AddDriverPage extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
seatsAvailable: ''
};
this.onFirstNameChange = this.onFirstNameChange.bind(this);
this.onLastNameChange = this.onLastNameChange.bind(this);
this.onSeatsAvailable = this.onSeatsAvailable.bind(this);
this.onSubmit = this.handleSubmit.bind(this);
}
onFirstNameChange(e) {
const firstName = e.target.value;
this.setState(() => ({ firstName }));
}
onLastNameChange(e) {
const lastName = e.target.value;
this.setState(() => ({ lastName }));
}
onSeatsAvailable(e) {
const seatsAvailable = e.target.value;
this.setState(() => ({ seatsAvailable }));
}
handleSubmit(e) {
e.preventDefault();
const church_id = this.props.match.params.church_id;
const driversRefString = `churches/${church_id}/drivers`;
const driversRef = database.ref(driversRefString);
const driver = {
firstName: this.state.firstName.trim(),
lastName: this.state.lastName.trim(),
seatsAvailable: this.state.seatsAvailable.trim()
};
driversRef.push(driver);
this.setState(() => ({
firstName: '',
lastName: '',
seatsAvailable: ''
}));
this.props.history.push(`/drivers/${church_id}`);
if (e) {
console.log(e);
}
console.log(this.props.match.params.church_id, 'submitted');
}
render() {
console.log('state:', this.state, 'props:', this.props, 'AddDriverPage');
// console.log(this.props.match.params.church_id);
return (
<Grid>
{/* Row */}
<Grid.Row centered={true}>
<Grid.Column width={14}>
<Message>
<p>Add a driver below...</p>
</Message>
</Grid.Column>
</Grid.Row>
{/* Row */}
<Grid.Row centered={true}>
<Grid.Column width={14}>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>First Name</label>
<input placeholder="First Name" type="text" value={this.state.firstName} onChange={this.onFirstNameChange} />
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input placeholder="Last Name" type="text" value={this.state.lastName} onChange={this.onLastNameChange} />
</Form.Field>
<Form.Field>
<label>Seats Available</label>
<input placeholder="Seats Available" type="text" value={this.state.seatsAvailable} onChange={this.onSeatsAvailable} />
</Form.Field>
<Button type="submit">Add</Button>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
);
}
}
我认为你的构造函数绑定有错别字:
this.onSubmit = this.handleSubmit.bind(这个);
最有可能是:
This.handleSubmit = this.handleSubmit.bind(这个)
正如您所做的那样,将 'this' 绑定到该函数。
它看起来没有绑定,所以当您在 handleSubmit 中调用 'this' 时,它指的是函数而不是组件。一般来说,如果你看到一个未定义的 prop 有问题,那么在你的函数中尝试 'console.log(this)' 来检查它的作用域是否正确总是一个好主意。
我正在使用 React、React Router、Firebase 和语义 UI React 组件。在我的路线组件的初始渲染中,当我 console.log 'this.props' 时参数 'church_id' 存在 - 它应该存在。但是,在单击 'Add' 按钮提交表单后,我收到错误消息:
Cannot read property match of undefined
就好像'this.props.match.params.church_id'消失了一样。这是由于在提交表单后对组件进行了额外的重新渲染吗?我正在使用 'e.preventDefault()' 来防止重新渲染,所以我不确定如何继续。任何帮助将不胜感激!
这是呈现表单的组件:
import React from 'react';
import {
Grid, Message, Button,
Segment, Container, Header,
Form
} from 'semantic-ui-react';
import database from '../../firebase/firebase';
export default class AddDriverPage extends React.Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
seatsAvailable: ''
};
this.onFirstNameChange = this.onFirstNameChange.bind(this);
this.onLastNameChange = this.onLastNameChange.bind(this);
this.onSeatsAvailable = this.onSeatsAvailable.bind(this);
this.onSubmit = this.handleSubmit.bind(this);
}
onFirstNameChange(e) {
const firstName = e.target.value;
this.setState(() => ({ firstName }));
}
onLastNameChange(e) {
const lastName = e.target.value;
this.setState(() => ({ lastName }));
}
onSeatsAvailable(e) {
const seatsAvailable = e.target.value;
this.setState(() => ({ seatsAvailable }));
}
handleSubmit(e) {
e.preventDefault();
const church_id = this.props.match.params.church_id;
const driversRefString = `churches/${church_id}/drivers`;
const driversRef = database.ref(driversRefString);
const driver = {
firstName: this.state.firstName.trim(),
lastName: this.state.lastName.trim(),
seatsAvailable: this.state.seatsAvailable.trim()
};
driversRef.push(driver);
this.setState(() => ({
firstName: '',
lastName: '',
seatsAvailable: ''
}));
this.props.history.push(`/drivers/${church_id}`);
if (e) {
console.log(e);
}
console.log(this.props.match.params.church_id, 'submitted');
}
render() {
console.log('state:', this.state, 'props:', this.props, 'AddDriverPage');
// console.log(this.props.match.params.church_id);
return (
<Grid>
{/* Row */}
<Grid.Row centered={true}>
<Grid.Column width={14}>
<Message>
<p>Add a driver below...</p>
</Message>
</Grid.Column>
</Grid.Row>
{/* Row */}
<Grid.Row centered={true}>
<Grid.Column width={14}>
<Form onSubmit={this.handleSubmit}>
<Form.Field>
<label>First Name</label>
<input placeholder="First Name" type="text" value={this.state.firstName} onChange={this.onFirstNameChange} />
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input placeholder="Last Name" type="text" value={this.state.lastName} onChange={this.onLastNameChange} />
</Form.Field>
<Form.Field>
<label>Seats Available</label>
<input placeholder="Seats Available" type="text" value={this.state.seatsAvailable} onChange={this.onSeatsAvailable} />
</Form.Field>
<Button type="submit">Add</Button>
</Form>
</Grid.Column>
</Grid.Row>
</Grid>
);
}
}
我认为你的构造函数绑定有错别字:
this.onSubmit = this.handleSubmit.bind(这个);
最有可能是:
This.handleSubmit = this.handleSubmit.bind(这个)
正如您所做的那样,将 'this' 绑定到该函数。
它看起来没有绑定,所以当您在 handleSubmit 中调用 'this' 时,它指的是函数而不是组件。一般来说,如果你看到一个未定义的 prop 有问题,那么在你的函数中尝试 'console.log(this)' 来检查它的作用域是否正确总是一个好主意。