Question

我使用了与我在react应用程序中的react native上获得的功能相同的功能，但它没有用，尽管我在构造函数中定义了它，但我似乎无法访问该状态，目的是将数据推送到Firebase ，我尝试使用随机字符串，它肯定可以正常工作，只是在使用它时会导致崩溃。

如您所见，我正在使用文本组件来查看HTML页面上的状态：

import React, { Component } from 'react';
import fire from './config/Fire';

class Home extends Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      isOpen: false,
      title: '',
      description: '',
      loading: true
    };
  }

  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

  saveData(e) {
    e.preventDefault();
    let title = this.state.title;
    let description = this.state.description;
    const { currentUser } = fire.auth();
    fire
      .database()
      .ref(`/master/setup/`)
      .push({ title, description })
      .then(() => {
        this.setState({ loading: false }).catch(error => {
          console.log(error);
        });
      });
  }

  render() {
    return (
      <div>
        <Container>
          <Row>
            <Col sm="2" lg="3" />
            <Col sm="8" lg="6">
              <h1>General Setup</h1>

              <form>
                <div class="form-group">
                  <label for="exampleInputEmail1">Title</label>
                  <input
                    value={this.state.title}
                    onChange={this.handleChange}
                    name="title"
                    class="form-control"
                    id="title"
                    placeholder="Enter event title"
                  />
                </div>
                <div class="form-group">
                  <label for="exampleInputEmail1">Description</label>
                  <input
                    value={this.state.description}
                    onChange={this.handleChange}
                    name="description"
                    class="form-control"
                    id="description"
                    placeholder="Enter event description"
                  />
                </div>
                <button onClick onClick={this.saveData} class="btn btn-primary">
                  Submit
                </button>
              </form>

              <p>{this.state.title}</p>
              <p>{this.state.description}</p>
              <p>{this.state.loading.toString()}</p>
            </Col>
            <Col sm="2" lg="3" />
          </Row>
        </Container>
      </div>
    );
  }
}

export default Home;

TypeError：无法读取未定义的属性“状态”

请有人告诉我这段代码是怎么回事？

Answer 1

您忘记将范围绑定到saveData方法。将其绑定到handleChange方法时，在构造函数中进行操作。

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.saveData = this.saveData.bind(this);
    this.state = {
      isOpen: false,
      title: '',
      description: '',
      loading: true,
  };

或

将saveData定义更改为使用ES6中的箭头函数语法的

saveData = (e) => {...function body as you already have it}

默认情况下，父级作用域将为您绑定

Answer 2

您需要将saveData绑定到constructor中。

this.saveData = this.saveData.bind(this);

Answer 3

您可以将saveData更改为箭头函数，因此不需要绑定。这是ES6版本，请执行以下操作

saveData = e => {
  e.preventDefault();
  let title = this.state.title;
  let description = this.state.description;
  const { currentUser } = fire.auth();
  fire.database().ref(`/master/setup/`)
      .push({ title, description })
      .then(() => {
      this.setState({ loading: false})
      .catch((error) => {
          console.log(error);
      })
  });
}

反应无法读取状态

3 个答案: