Question

我正在使用React，React Router，Firebase和Semantic UI React Components。在我的路由组件的初始呈现时，当我在console.log“this.props”时应该存在参数'church_id'。但是，在单击“添加”按钮提交表单后，我收到错误：

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>
    );
  }
}

Answer 1

我认为你的构造函数绑定中有一个拼写错误：

this.onSubmit = this.handleSubmit.bind（this）;

最有可能是：

This.handleSubmit = this.handleSubmit.bind（this）

因为你所做的就是绑定＆＃39;这个＆＃39;到功能。

看起来它没有绑定所以当你打电话给这个＆＃39;在handleSubmit中它指的是函数而不是组件。一般情况下，如果您发现未定义道具的问题，尝试“console.log（this）＆＃39;”总是一个好主意。在您的函数中检查它是否正确范围。

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

1 个答案: