Javascript 如何在firebase实时数据库上找到特定路径，然后使用文本输入更改该路径上的值？

突击测验，热门人物：

您正在构建一个react本机应用程序。您在应用程序根目录中将某些值设置为firebase作为对象，如下所示：

firebase
      .database()
      .ref("/companies/")
      .set({
        awesomeCompany: {
          name: "Awesome Company",
          owner: "Joe Awesome",
          gmail: "joeawesome@gmail.com",
          fleetSize: 2
        },
        badCompany: {
          name: "Bad Company",
          owner: "Joe Bad",
          gmail: "joebad@gmail.com",
          fleetSize: 3
        }

{
  "companies": {
    "awesomeCompany": {
      "fleetSize": 2,
      "gmail": "joeawesome@gmail.com",
      "name": "Awesome Company",
      "owner": "Joe Awesome"
    },
    "badCompany": {
      "fleetSize": 3,
      "gmail": "joebad@gmail.com",
      "name": "Bad Company",
      "owner": "Joe Bad"
    }
  }
}

您希望为当前用户提供一个文本输入字段，如果他们是公司的所有者，他们可以通过该字段更改公司的规模

您的firebase auth工作正常，因此您知道

firebase.auth（）.currentUser.email

将用于检查他们是否是所有者

您的数据库值已设置-它们如下所示：

firebase
      .database()
      .ref("/companies/")
      .set({
        awesomeCompany: {
          name: "Awesome Company",
          owner: "Joe Awesome",
          gmail: "joeawesome@gmail.com",
          fleetSize: 2
        },
        badCompany: {
          name: "Bad Company",
          owner: "Joe Bad",
          gmail: "joebad@gmail.com",
          fleetSize: 3
        }

{
  "companies": {
    "awesomeCompany": {
      "fleetSize": 2,
      "gmail": "joeawesome@gmail.com",
      "name": "Awesome Company",
      "owner": "Joe Awesome"
    },
    "badCompany": {
      "fleetSize": 3,
      "gmail": "joebad@gmail.com",
      "name": "Bad Company",
      "owner": "Joe Bad"
    }
  }
}

如何将初始信息呈现到屏幕上，以及如何设置文本输入逻辑，以便用户输入更改数据库中的数据

为了了解我的大脑，以及我是如何失败的，我在下面列出了我自己的代码作为起点。如果有一种方法可以告诉我如何采取我的基本策略并使其发挥作用——即使它并不优雅——我将不胜感激。但总的来说，我只是在努力解决如何使用数据快照获取数据路径引用，并使它们可以在其他地方使用

谢谢你的帮助，任何人

// my crummy half baked code below
import React, { Component } from "react";
import { View, Text, TextInput, Button } from "react-native";
import { styles } from "../styles";
import * as firebase from "firebase";

export default class OwnerProfileScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      gmail: null,
      name: null,
      fleetSize: null
    };
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    const rootRef = firebase.database().ref(); // firebase reference
    const authEmail = firebase.auth().currentUser.email; // current user

    return rootRef.once("value").then(
      function(snapshot) {
        const idArray = Object.keys(snapshot.child("companies/").val()); // array of Ids

        const companyData = idArray.map(id =>
          snapshot.child("companies/" + id).val()
        ); //  values of contained in objects at each key

        const ownersCompany = companyData.filter(
          obj => obj.gmail === authEmail
        ); // an array containing one object if the gmail address in the object is the same as the currentUser logged in


           // what is the path of fleetSize?  
           // how do I define it to keep it available to use later 
           // with a Text Input event?

        this.setState({
          name: ownersCompany[0].name,
          gmail: ownersCompany[0].gmail,
          fleetSize: ownersCompany[0].fleetSize
        });
      }.bind(this)
    );
  };

  changeFleetSize = userInput => {
    //in order to set the user input to the database, I need the path
    //of the fleetSize of the current user (who has been verified as an 
    // owner by comparing firebase auth to gmail addresses of company)
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>minPrice = {this.state.name}</Text>
        <Text>gmail = {this.state.gmail}</Text>
        <Text>fleetSize = {this.state.fleetSize}</Text>
        <TextInput
          style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
          //onChangeText currently does nothing since I don't know how
          // to get the particular path of particular fleetSize 
          onChangeText={userInput => this.changeFleetSize(userInput)} 
        />
      </View>
    );
  }
}

//下面是我拙劣的半生不熟的代码
从“React”导入React，{Component}；
从“react native”导入{View，Text，TextInput，Button}；
从“./styles”导入{styles}；
从“firebase”导入*作为firebase；
导出默认类OwnerProfileScreen扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
gmail:null，
名称：空，
fleetSize:空
};
}
componentDidMount（）{
这是getData（）；
}
getData=（）=>{
const rootRef=firebase.database（）.ref（）；//firebase引用
const authEmail=firebase.auth（）.currentUser.email；//当前用户
返回rootRef.一次（“值”）。然后(
功能（快照）{
const idArray=Object.keys（snapshot.child（“companys/”）.val（））；//ID数组
const companyData=idArray.map（id=>
snapshot.child（“companys/”+id）.val（）
)；//每个键处的对象中包含的值
const ownersCompany=companyData.filter(
obj=>obj.gmail===authEmail
)；//如果对象中的gmail地址与当前登录的用户相同，则该数组包含一个对象
//车队规模的路径是什么？
//如何定义它以使其可供以后使用
//使用文本输入事件？
这是我的国家({
名称：所有者公司[0]。名称，
gmail:ownersCompany[0]。gmail，
fleetSize:所有者公司[0]。fleetSize
});
}.绑定（此）
);
};
changeFleetSize=userInput=>{
//为了设置数据库的用户输入，我需要路径
//当前用户（已被验证为
//所有者（通过比较firebase auth和公司的gmail地址）
};
render（）{
返回(
minPrice={this.state.name}
gmail={this.state.gmail}
fleetSize={this.state.fleetSize}
代码非常混乱，因此很难说您想要完成什么。但让我在这里猜测一下：

您希望从数据库中加载单个公司
你知道公司所有者的电子邮件地址
如果这是正确的，您可以使用查询来实现目标。例如：

var query = rootRef.child("companies").orderByChild("gmail").equalTo(authEmail);
var self = this;
query.once("value").then(function(result) {
  result.forEach(function(snapshot) { // loop over result snapshots, since there may be multiple
    const companyData = snapshot.val();

    self.setState({
      name: companyData.name,
      gmail: companyData.gmail,
      fleetSize: companyData.fleetSize
    });
  })
);

变化如下：

使用查询仅选择具有正确gmail地址的公司
对结果进行循环，因为（至少在API级别上）可能有多家公司的
gmail
属性具有该值
摆脱对
对象.keys
的整个迭代和过滤，因为这会使读取变得困难。这个结果对于Firebase实时数据库代码来说也更为惯用
使用
self
跟踪
this
实例，只是因为我不想计算
bind
调用
@FrankvanPuffelen谢谢；将JSON更改为文本。当您再次运行此代码时，JSON有什么问题？哪一行没有达到您期望的效果？我在代码中添加了一些注释，以澄清我试图解决的问题；据我所知，JSON没有问题。我通过查找这些值来呈现一些值，但我不知道如何保存它们我想澄清一下，如果我能定义类似于
const-ownersFleetSizePath=firebase.database（）.ref（“companys/”+ownerCompanyId）的东西
然后，在输入文本时，我会尝试在该路径上设置一个值。非常感谢您的帮助。我同意这是获取和呈现信息的更好方法，而且我的代码很混乱：）。我将尝试进一步缩小焦点。在TextInput组件中，我获取userInput并希望将其直接写入数据库。为此，我设想我将需要一个类似以下的函数：
writeNewFleetSizeToDatabase=userInput=>{firebase.database（）.ref（“companys/”+companyId）。set({fleetSize:userInput}）；}
如何获得正确的公司ID？我很困惑。所以问题不是关于读取，而是关于写入数据？：-/很抱歉造成混乱。目标是：读取，写入，再次读取。从数据库读取，渲染到屏幕；当用户输入文本以更改fleetSize时，写入数据库，然后立即再次渲染到屏幕。t为了完成编写部分，我复制了您（@Frank）的大部分代码，从您停止的
const companyData=snapshot.val（）；
能够找到如何获取公司ID
const companyData=snapshot.ref.key；
Frank-非常感谢您为帮助一个noob所做的努力。