使用箭头功能时，this.setState不是函数

Question

console.log会打印出正确的数字，但this.setState会引发错误。我以为我用箭头函数正确地绑定了它。

export default class App extends React.Component { 

constructor(props) { 
    super(props); 
    this.emotion='happy'; 
    this.state = { 
     idList:[] 
    }; 
} 

componentWillMount() { 
this.getEmotionIDs(); 
} 


getEmotionIDs =() => { 
    firebase.database().ref(this.emotion).once('value').then(function(snapshot) { 
     console.log("IDs: " + snapshot.val()); 
    this.setState({ idList: snapshot.val()}); 

    }); 
} 


render() { 

    return (
.... 
) 

Answer 1

尝试使用箭头功能，为您承诺的自动捆绑

getEmotionIDs =() => { 
    firebase.database().ref(this.emotion).once('value').then((snapshot) => { 
     console.log("IDs: " + snapshot.val()); 
    this.setState({ idList: snapshot.val()}); 

    }); 
} 

Answer 2

你getEmotionIDs需要bind太：

getEmotionIDs =() => { 
firebase.database().ref(this.emotion).once('value').then(function(snapshot) { 
    console.log("IDs: " + snapshot.val()); 
    this.setState({ idList: snapshot.val()}); 

    }).bind(this); 
}