每当添加新数据时,Flatlist会多次重新发送来自FireBase的数据

我正在尝试使用react native和firebase构建聊天应用程序界面,更新从我的数据库中提取的数据时遇到问题。我可以将现有数据加载到我使用的明细表中:

const firebaseApp = firebase.initializeApp(firebaseConfig);
let db = firebaseApp.database();
let ref = db.ref("/room");

 componentDidMount() {
      ref.on('value', function(snapshot) {
        snapshot.forEach(function (childSnapshot){
          childData.push(childSnapshot.val());
        });
        this.setState({
          messages: childData
        });
       messageCount = snapshot.numChildren();
     }.bind(this));
 }

平面图代码:

<KeyboardAvoidingView style={styles.inputContainer}>
      <FlatList
          data={this.state.messages}
          // renderItem={({item}) =><Text>{item.contents}</Text>}
          keyExtractor = {item => item.timestamp}
          renderItem={({item}) => <Bubble style={{margin: 10}} 
          color="#FFC800" arrowPosition='right'>{item.contents}</Bubble>}
            />}
        />
        <Button onPress={()=>{this.onPressButton()}} title="Send">Click me</Button>      
      </KeyboardAvoidingView>

这是我将文本输入中的文本添加到数据库的位置

function addMessage(messageText) {
  messageCount++;
  firebase.database().ref('room/'+messageCount).set({
      contents: messageText,
      timestamp: firebase.database.ServerValue.TIMESTAMP
  });
}

该代码给出了我想要的以下结果(忽略糟糕的样式):

但每当我尝试发送消息时,它都会正确地添加到数据库中,但扁平列表会更新以显示以下内容:

其中前一条消息和新消息被多次呈现。将新项目从数据库呈现到平面列表中的最佳方法是什么?