setState với Firebase Promise trong React

Question

Làm cách nào tôi có thể đặt trạng thái bên trong thành phần phản ứng?

`ve có thông báo lỗi:

Uncaught TypeError: Cannot read property 'setState' of null

đây là danh sách mã thành phần:

class MessageList extends React.Component { 
constructor(props){ 
super(props); 
this.state = { 
    messages: [] 
}; 

var firebaseRef = firebase.database().ref(); 
firebaseRef.once('value') 
    .then(function(dataSnapshot) { 
     this.setState({ 
     messages: messages 
     }); 
    }); 
} 

render() { ... } 

} 

Answer 1

này được đề cập đến lời hứa phạm vi. Hoặc sử dụng chức năng mũi tên chất béo (es6)

var firebaseRef = firebase.database().ref(); 
firebaseRef.once('value') 
    .then((dataSnapshot) => { 
     this.setState({ 
     messages: messages 
     }); 
    }); 

Hoặc tạo một bản sao của điều này trước khi sự hứa hẹn

constructor(props){ 
super(props); 
this.state = { 
    messages: [] 
}; 
var that = this; 
var firebaseRef = firebase.database().ref(); 
firebaseRef.once('value') 
    .then(function(dataSnapshot) { 
     that.setState({ 
     messages: messages 
     }); 
}); 

Một lựa chọn cuối cùng, bạn có thể liên kết này với lời hứa:

firebaseRef.once('value') 
.then(function(dataSnapshot) { 
    this.setState({ 
     messages: messages 
    }); 
}).bind(this) 

Answer 2

Lúc đầu, tôi muốn đề nghị bạn tìm nạp dữ liệu firebase ban đầu trong vòng đời componentDidMount thành phần và sửa chữa setState của bạn vấn đề mà bạn có thể làm theo mã dưới đây vào nơi mà tôi đã thay đổi chỉ dòng self = this;,

class MessageList extends React.Component { 
constructor(props){ 
super(props); 
this.state = { 
    messages: [] 
}; 

componentDidMount() { 
var self = this; 
var firebaseRef = firebase.database().ref(); 
    firebaseRef.once('value') 
    .then(function(dataSnapshot) { 
    self.setState({ 
     messages: messages 
    }); 
    }); 
} 
} 

render() { ... } 

}