javascript - Reactjs 到 firebase 数据库 : Trouble adding multiple children to firebase db

Question

所以我在 YouTube 上关注了一个简单的 React/Firebase 聊天室:https://www.youtube.com/watch?v=or3Gp29o6fE作为我正在做的项目的引用。我正在制作一个错误/问题跟踪器，以便用户可以输入站号、错误/问题，然后输入其描述。我不断收到错误:

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

而且我不确定如果它只是一个 ID 号，它是如何未定义的。我目前的最终目标是能够通过 ID 添加和删除错误/问题。

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

看起来像是一个错字。您在 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);