Question

所以，让我们谈谈组件React的生命周期。

我的模型文件名称是Firebase.js里面我的所有方法都可以触发我的数据。

Firebase.js

＆＃13;

export const getUserShare = () => {
  let arr = [];
  db.ref(`/music/${userID()}`).on("value", (snapshot, key) => {
    snapshot.forEach(items => {
      let element = items.val();
      arr.push(element);
    });
  });
  return arr;
};

＆＃13;

我有一个Profil.js组件，在里面我导入了我想要的方法（对于这个例子_getUserData()）

在我的组件上，我设置了一个状态arrSharing，名为my _getUserData()，这个输出是一个包含我所有数据的数组。

Profil.js：

＆＃13;

this.state = {
      arrSharing: getUserShare()
};

＆＃13;

Profil.js只能通过我的路由器访问，或者如果您将链接放在浏览器上。

现在我在渲染函数中渲染数据：

＆＃13;

{this.state.arrSharing.map((items, i) => {
                    return (
                      <div key={i} className="share-music">
                        <h5 className="share-music__title">
                          {items.artiste} - {items.title}
                        </h5>
                        <p className="share-music__platform">
                          par {items.displayName} sur #{items.radio}
                        </p>
                      </div>
                    );
                  })}

＆＃13;

现在运行应用程序，如果我第一次在Profil.js组件上没有加载数据，但是如果我继续使用另一个组件，并且在我返回Profil.js后数据被加载。

问题来自组件第一次不渲染。当我使用componentDidMount()时，我遇到了同样的问题。这对我的案子来说很成问题。

Answer 1

我发现异步操作处理存在问题。

更改您的getUserShare方法以接受回调：

export const getUserShare = (callback) => {
  db.ref(`/music/${userID()}`).on("value", (snapshot, key) => {
    const arrSharing = [];
    snapshot.forEach(items => {
      let element = items.val();
      arrSharing.push(element);
    });
    callback(arrSharing);
  });
};

然后在 Profile.js ：

中执行此操作

this.state = {
  arrSharing: [],
}

componentDidMount() {
  getUserShare((arrSharing) => {
    this.setState({ arrSharing })
  })
}

Lifecycle React组件，带有即时加载组件

1 个答案: