javascript - Lifecycle React组件，具有即时加载组件

Question

那么，我们来谈谈 React 组件的生命周期。

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

Firebase.js

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;
};

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

在我的组件上，我设置了一个状态arrSharing，在我的方法_getUserData()的名称处，它的输出是一个包含我所有数据的数组。

Profil.js:

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

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

现在我在渲染函数中渲染数据，如下所示:

{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>
                    );
                  })}

现在运行应用程序，如果我第一次使用 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 })
  })
}