Question

我正在尝试使用firebase构建一个react native listview，它会在数据更改时自动更新并重新呈现列表。

我在componentDidMount

中运行查询

async componentDidMount(){

 let userId = await AsyncStorage.getItem('workUserId')

this.chatIdRef.child(userId).orderByChild('timeStamp').on('child_added', snap => {
this.chatsRef.child(snap.key).on('value', snapshot => {
      this.handleEvent("child_added", snap.val().userId, snapshot.val().text, snap.val().userName, snap.key);
  });
});

this.chatIdRef.child(userId).orderByChild('timeStamp').on('child_changed', snap => {
  this.chatsRef.child(snap.key).on('value', snapshot => {
      this.handleEvent("child_changed", snap.val().userId, snapshot.val().text, snap.val().userName, snap.key);
    });
  });
}

然后使用案例来运行子项添加事件或更改子项

handleEvent(event, receiverId, text, name, key) {
switch (event) {
case "child_added":
  this.items.push({event: event, receiverId: receiverId, text: text, name: name, key: key})
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this.items)
  });
break;

case "child_changed":
  this.items.push({event: event, receiverId: receiverId, text: text, name: name, key: key})
  this.setState({
    dataSource: this.state.dataSource.cloneWithRows(this.items)
  });
break;
}}

当我在firebase中更改数据时，listview没有相应地更新，它只添加了另一行。我不确定我的问题是使用本机响应还是优化我运行firebase查询的方式。

Answer 1

它只会添加新行，因为您没有更新值。您只是将元素推入数组，因此它将添加元素而不是更新现有元素。

您需要更改case "child_changed"的代码，如：

let newArray = oldArray.slice();
newArray[indexToUpdate] = {
  ...oldArray[indexToUpdate],
  field: newValue,
};
let newDataSource = oldDataSource.cloneWithRows(newArray);

您可以从here

了解更多相关信息

更新对子更改事件firebase的本机列表视图作出反应

1 个答案: