javascript - React + Firebase undefined 使用点击事件

Question

希望这是一个快速修复。基本上，我在子组件的一些元素上设置了 onClick 监听器，当它们被单击时，它会从主组件运行一个函数。一切正常，直到我们在调用 firebase 数据库时遇到特定行，我在那里遇到未定义的问题。我在下面的代码中添加了注释，以便您确切了解发生了什么。

getDataName(event) {
    var title;
    var that = this;
    // Grabs data name attribute from element clicked
    var grabIdentifier = event.target.getAttribute('data-name');
    console.log(grabIdentifier); // prints "cruise"

    // Call to firebase
    var greeting = database.ref('events/travel');
      greeting.once('value').then(function(snapshot) {
      console.log(grabIdentifier); // prints "cruise"

      // Set title to value of the "cruise" key.
      title = snapshot.val().grabIdentifier;
      console.log(title); // prints "undefined" =(

      that.setState({
         greeting : title
       });
    });
  }

这里的想法是将状态设置为作为值存储在 firebase 数据库中“cruise”键下的文本。难倒了!

如果我重写下面的行，并且实际上把“cruise”这个词放在那里，它也可能会有所帮助......这很奇怪。见下文，

 title = snapshot.val().cruise;

Answer 1

您正在尝试访问名为 grabIdentifier 的属性，您需要使用括号表示法来访问 grabIdentifier 引用的属性名称

title = snapshot.val()[grabIdentifier]

有关属性访问器的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors