Question

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

错误：Reference.set失败：第一个参数在属性'bugs.0.station'
中包含undefined

如果它只是一个身份证号码，我不确定它是如何定义的。我此时的最终目标是能够通过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

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

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);

Answer 2

错误非常明确：

Reference.set failed：第一个参数在属性'bugs.0.station'
中包含undefined

由于您的代码中只有一次调用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。

对firebase db的反应：无法将多个子项添加到firebase db

2 个答案: