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)' 来检查它的作用域是否正确总是一个好主意。