javascript - 在reactjs组件状态下更改字段的值(使用从Firebase获得的数据)

我只是想从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似乎在未定义的位置。我尝试记录参数的控制台中也显示了“ undefined”，但是snapshot.val（）具有所需的字符串。
谢谢

最佳答案

changeEventName似乎在哪里未定义


在呼叫changeEventName的地方，需要在其前面加上this。

this.changeEventName

同样，由于要在回调内部调用它，因此您首先需要绑定方法以保留this的值。您可以通过多种方式执行此操作，最常见的方法是：

明确地在构造函数内部：

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

或使用箭头功能：

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

  在尝试登录参数的控制台中也会显示“ undefined”


这是因为events.on是异步的，您需要将console.log移动到回调中。