Question

React：无法读取未定义的属性“setState”

2020-08-18

83

javascript reactjs setstate

我从 Firebase 实时数据库获取了一些数据，现在我正尝试将其添加到变量中。我确信查询有效，因为如果我 console.log(dataSnapshot)，它会记录正确的数据（即 001）。但是，当我尝试使用该数字创建变量时，我收到以下错误： 无法读取未定义的属性“setState” ，并且它不会向控制台返回任何内容。

这是我的代码：

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { timestamps: [], user: auth().currentUser, serial: "" };
  }

  componentDidMount() {
    const uid = this.state.user.uid;
    console.log(uid);
    let serial = this.state.serial;
    const serialRef = db.ref(uid + "/serial");
    serialRef.once("value").then(function (dataSnapshot) {
      console.log(dataSnapshot.val());
      this.setState({ serial: dataSnapshot.val() }, () => {
        serial = this.state.serial;
        console.log(serial);
      });
    });

这是我的控制台的屏幕截图

提前致谢！

Answer 1

您没有使用箭头回调函数，如果不使用箭头回调，则必须绑定函数。如果您不想编写绑定语句，请使用箭头函数，它将自动获取类的上下文。

serialRef.once("value").then((dataSnapshot) => {
      console.log(dataSnapshot.val());
      this.setState({ serial: dataSnapshot.val() }, () => {
        serial = this.state.serial;
        console.log(serial);
      });
    });

Answer 2

您的问题是，您传递给 serialRef.once("value").then(...) 的回调没有设置 "this" 上下文。如果您将代码更改为此，它应该可以正常工作：

componentDidMount() {
    const uid = this.state.user.uid;
    console.log(uid);
    let serial = this.state.serial;
    const serialRef = db.ref(uid + "/serial");
    // grab a reference to the current "this" context
    const table = this;
    serialRef.once("value").then(function (dataSnapshot) {
      console.log(dataSnapshot.val());

      // invoke setState on the captured context
      table.setState({ serial: dataSnapshot.val() }, () => {
        serial = table.state.serial;
        console.log(serial);
      });
    });

或者您可以使用 lambda 函数，就像您已经在 setState 调用 中所做的那样：

componentDidMount() {
    const uid = this.state.user.uid;
    console.log(uid);
    let serial = this.state.serial;
    const serialRef = db.ref(uid + "/serial");
     // "Fat arrow" or "lambda" functions implicitly capture the current "this" context
    serialRef.once("value").then((dataSnapshot) => {
      console.log(dataSnapshot.val());
      this.setState({ serial: dataSnapshot.val() }, () => {
        serial = this.state.serial;
        console.log(serial);
      });
    });

Answer 3

箭头函数应该保留你的 this 上下文

serialRef.once("value").then((dataSnapshot) => {
     console.log(dataSnapshot.val());
     this.setState({ serial: dataSnapshot.val() }, () => {
       serial = this.state.serial;
       console.log(serial);
     });