Reactjs 到 firebase db：无法将多个子级添加到 firebase db

Question

所以我在 youtube 上关注了一个简单的 react/firebase 聊天室：https://www.youtube.com/watch?v=or3Gp29o6fE 作为我正在做的项目的参考。我正在制作一个 bug/issue 跟踪器，以便用户可以输入一个站号，bug/issue，然后是它的描述。我一直收到错误消息：

Error: Reference.set failed: First argument contains undefined in property 'bugs.0.station'

而且我不确定如果它只是一个 ID 号码，它是如何未定义的。我此时的最终目标是能够通过 id.

添加和删除 bug/issue

import React, { Component } from 'react';
import { Button } from "react-bootstrap";
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';

class HomePage extends Component {
constructor(props,context) {
    super(props,context);
    this.stationBug = this.stationBug.bind(this)
    this.issueBug = this.issueBug.bind(this)
    this.descBug = this.descBug.bind(this)
    this.submitBug = this.submitBug.bind(this)
    this.state = {
        station: '',
        bug: '',
        desc: '',
        bugs: []
    }
}

componentDidMount() {
    firebase.database().ref('bugs/').on ('value', (snapshot) => {
        const currentBugs = snapshot.val()
        if (currentBugs != null) {
            this.setState({
                bugs: currentBugs
            })
        }
    })
}

stationBug(event) {
    this.setState({
        station: event.target.value
    });
}

issueBug(event) {
    this.setState({
        bug: event.target.value
    });
}

descBug(event) {
    this.setState({
        desc: event.target.value
    });
}

submitBug(event) {
    const nextBug = {
        id: this.state.bugs.length,
        station: this.state.title,
        bug: this.state.bug,
        desc: this.state.desc
    }
    firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}

  render() {

return (
  <div className="App">
            {
            this.state.bugs.map((bug, i) => {
                    return (
                        <li key={bug.id}>{bug.station}</li>
                    )
                })          
            }
            <input onChange={this.stationBug} type="text" placeholder="Station #" />
            <br />
            <textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
            <br />
            <textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
            <br />
            <Button onClick={this.submitBug} type="button"> Enter Bug </Button>
  </div>
);
  }
}

export default withAuthorization()(HomePage);

Answer 1

错误很明显：

Reference.set failed: First argument contains undefined in property 'bugs.0.station'

由于您的代码中只有一次调用 Reference.set()，所以问题一定出在这里：

submitBug(event) {
    const nextBug = {
        id: this.state.bugs.length,
        station: this.state.title,
        bug: this.state.bug,
        desc: this.state.desc
    }
    firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}

所以 this.state.title 似乎是 undefined。您很可能想使用 station: this.state.station.

Answer 2

看起来像是打字错误。您在 submitBug 方法中引用 this.state.title 而不是 this.state.station。

class HomePage extends Component {
    constructor(props) {
    super(props);

    this.state = {
        station: '',
        bug: '',
        desc: '',
        bugs: []
    }
}

componentDidMount() {
    firebase.database().ref('bugs/').on ('value', (snapshot) => {
        const currentBugs = snapshot.val()
        if (currentBugs != null) {
            this.setState({
                bugs: currentBugs
            })
        }
    })
}

stationBug=(event)=>{
    this.setState({
        station: event.target.value
    });
}

issueBug=(event)=>{
    this.setState({
        bug: event.target.value
    });
}

descBug=(event)=>{
    this.setState({
        desc: event.target.value
    });
}

submitBug=(event)=>{
    const nextBug = {
        id: this.state.bugs.length,
        station: this.state.title,
        bug: this.state.bug,
        desc: this.state.desc
    }
    firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}

  render() {

    return (
      <div className="App">
        {this.state.bugs.map(bug => <li key={bug.id}>{bug.station}</li>)}
        <input onChange={this.stationBug} type="text" placeholder="Station #" />
        <br />
        <textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
        <br />
        <textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
        <br />
        <Button onClick={this.submitBug} type="button"> Enter Bug </Button>
      </div>
    );
  }
}

export default withAuthorization()(HomePage);

Reactjs 到 firebase db：无法将多个子级添加到 firebase db

Reactjs to firebase db: Trouble adding multiple children to firebase db

javascript

reactjs

firebase

firebase-realtime-database

react-props