Question

我正在尝试从Firebase获取我的用户名。 console.log显示正确的用户名。但是，如何在useEffect中访问uName以在tet组件中显示它呢？

  useEffect(async () => {
    var username = await firebase
      .database()
      .ref("users/" + authUser + "/name")
      .once("value")
      .then(function(snapshot) {
        return snapshot;
      });
    var slicedName = JSON.stringify(username);
    var uName = slicedName.slice(1, -1);
    console.log("USERNAMELOG", uName);
  }, []);

Answer 1

useEffect挂钩不允许async/await函数作为主处理程序。您可以将其作为单独的函数并在挂钩中执行：

async function getData(authUser) {
  return firebase
    .database()
    .ref('users/' + authUser + '/name')
    .once('value')
}

useEffect(() => {
  getData(authUser)
    .then(username => {
      const slicedName = JSON.stringify(username)
      const uName = slicedName.slice(1, -1)
      console.log("USERNAMELOG", uName)
    })
}, [])

关于使用uName，如果您有一个（或上下文）可以从其他组件访问，则可以将其设置为组件状态或全局存储。

编辑：如果您使用的是redux，则应该具有调度功能，以便能够使用uName更新全局状态。与上面的代码片段相比，唯一需要更改的地方是，您将console.log替换为创建的某些调度函数，并将uName变量作为参数。进入Redux状态后，您应该能够将该值向下传播到需要该值的组件。

useEffect获取Firebase数据

1 个答案: