javascript - 如何使用 firebase 在值为真后退出 forEach 循环并使用react

标签 javascript reactjs firebase firebase-realtime-database

我正在尝试检查用户名以查看用户在输入时是否可用。我可以得到值,问题是它只是切换回 false,因为还有其他用户名与输入不匹配。

const usernameRef = firebase.database().ref('usernames');
    if (event.target.value) {
      usernameRef.on('value', snapshot => {
        snapshot.forEach(snap => {
         //snap.val() is each of the usernames in the db
          if (snap.val() === username) {
            this.setState({
              disabled: true
            });

            return;
          }

          if (snap.val() !== username) {
            this.setState({
              disabled: false
            });
          }
        });
      });
    }

输入只是一个基本输入,它调用激活这部分代码的函数 onChange。一切正常,当用户输入一个存在的用户名时,它确实将状态设置为 true,但随后它循环遍历其余的用户名并将其设置回 false。我认为 return 会解决这个问题,但事实并非如此。

最佳答案

除了使用 .forEach(),您还可以使用 Array.prototype.find()

const existingUsername = snapshot.val().find(u => u === username);

if(existingUsername) {
    this.setState({ disabled: true });
} else {
    this.setState({ disabled: false });
}

关于javascript - 如何使用 firebase 在值为真后退出 forEach 循环并使用react,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48896535/

相关文章:

javascript - 如果使用 jasmine 或 mocha 等测试框架时存在名为 "describe"或 "it"的全局函数怎么办

javascript - react ( native ): Pass a prop with the value obtained from an async function

javascript - React 更新后状态类型发生变化

android - 如何从 firebase RecyclerView 中删除项目

ios - Firebase crashlytics 自动上传 dsym

javascript - Facebook Marketing API 广告素材

javascript - 来自 JSON 的 Highcharts 堆积柱形图未绘制正确的值

javascript - 将事件附加到javascript中的动态元素

javascript - Nextjs 第一次运行时报错 : Error: Cannot find module 'caniuse-lite/data/features/css-unicode-bidi'

javascript - $fireDb 在 Nuxt Fire/Firebase Vuex 中未定义