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

Question

我从 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

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

 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 function，就像您在 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

箭头 function 应保留您的 this 上下文

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