改变reactjs组件状态中字段的值（数据来自firebase）

Question

我只想从Firebase数据库中获取一个字符串，并更新组件中的“eventname”字段，但我很难做到这一点。到目前为止我的代码：

import React from 'react';
import {ref} from '../Firebase';

class EventDisplay extends React.Component {
    constructor () {
        super();
        this.state = {
            eventName: "No event Selected."
        };
    }
    render () {
        return (<div>
            <h1>Name of Event: {this.state.eventName}</h1>
            <h1>Date and Time: Dummy Name</h1>
            <h1>Event Description: Dummy Name</h1>
        </div>);
    }

    changeEventName(str) {
        this.setState({eventName: str});
    }

    componentWillMount() {
        const events = ref.child('events/event1/Title');
        var param;
        events.on('value', (function(snapshot) {
            param = snapshot.val();
            console.log(snapshot.val());
            changeEventName(param);
            })
        );
        console.log(param);
    }


}

export default EventDisplay;

但是，changeEventName似乎没有定义它所在的位置。在我试图记录param的控制台中也会出现“undefined”，但snapshot.val（）具有所需的字符串。谢谢

Answer 1

changeEventName所在位置似乎未定义

在调用ChangeEventName时，需要在其前面加上this。

this.changeEventName

另外，由于您是在回调中调用它，因此首先需要绑定该方法，以便保留this的值。有很多方法可以做到这一点，最常见的是：

this.changeEventName = this.changeEventName.bind(this)

events.on('value', ((snapshot) => { ... }));