Question

我目前能够从Firestore获取用户数据，但是我在保存用户文档数据时遇到了麻烦。我的控制台下方出现错误

class MyApp extends App {
  render() {
  const { Component, pageProps } = this.props;
  return (
    <Layout>
      <Head>
        <link rel="shortcut icon" href="/favicon.ico" />
      </Head>
      <Component {...pageProps} />
    </Layout>
  );
}

我尝试关注来自的另一个用户的问题 Can't setState Firestore data，但仍然没有成功。

获取数据后，我确实有两个api请求，然后便可以设置状态。我尝试将Firestore请求合并到promise.all中，但无法成功，这就是我将其分离的原因。也许我走错了路，任何指导都值得赞赏。

  TypeError: this.setState is not a function
    at Object.next (RepRequest.js:32)
    at index.cjs.js:1344
    at index.cjs.js:1464

Answer 1

您的问题来自混合lambda函数声明（(...) => { ... }）和传统函数声明（function (...) { }）。

lambda函数将从其定义的地方继承this，但传统函数的this将与定义的地方分离。这就是为什么在旧版兼容代码中经常看到var self = this;的原因，因为this通常与您想要的不匹配。

下面是一个示例片段，演示了此行为：

function doSomething() {
  var anon = function () {
    console.log(this); // 'this' is independent of doSomething()
  }
  
  var lambda = () => {
    console.log(this); // inherits doSomething's 'this'
  }

  lambda(); // logs the string "hello"
  anon(); // logs the 'window' object
}

doSomething.call('hello')

解决方案

因此，您有两种可用的方法。使用任何您喜欢的东西。

选项1：使用Lambda表达式

app.auth().onAuthStateChanged(function(user) {

到

app.auth().onAuthStateChanged((user) => {

选项2：分配一个“自”变量

const items = [];
app.auth().onAuthStateChanged(function(user) {
  // ...
  this.setState({ userInfo: items });
}

到

const items = [];
const component = this; // using "component" makes more sense than "self" in this context
app.auth().onAuthStateChanged(function(user) {
  // ...
  component.setState({ userInfo: items });
}

从Firestore获取数据后如何设置状态

1 个答案:

解决方案

选项1：使用Lambda表达式

选项2：分配一个“自”变量