React Router 的匹配参数出现，然后随着表单提交调用而消失

Question

我正在使用React，React路由器，Firebase和语义UI React组件。在最初渲染我的路线组件后，当我console.log'this.props'时，存在参数'church_id'。但是，单击"添加"按钮提交表格后，我会收到一个错误：

无法读取未定义的属性匹配

好像'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>
    );
  }
}

Answer 1

我认为您的构造函数绑定中有错别字：

this.onsubmit = this.handlesubmit.bind(this(;

很可能是：

this.handlesubmit = this.handlesubmit.bind(this(

您所做的所有事情都对功能具有绑定为"此"。

看起来它没有绑定，因此当您在Handlesubmit中调用"此"时，它是指函数而不是组件。通常，如果您看到未定义的道具的问题，那么在功能中尝试" console.log(this("以正确检查它总是一个好主意。