为什么ListView在更改值后无法显示当前处于反应原生状态？

Question

这是我用来判断代码的位置

<TouchableOpacity
     style={styles.listItem}>
     {
          (rowData.name == 'Abigale') ? 
              <View style={styles.self}>
                <Text>
                  {rowData.msg}:{rowData.name}
                </Text>
              </View>   : 
              <View style={styles.friend}>
                <Text>
                  {rowData.name}:{rowData.msg}
                </Text>
              </View>  
       }
  </TouchableOpacity>

这是我用来更改代码列表

this.setState({ dataSource: this.state.dataSource.cloneWithRows(window.abigale.msgList) })

为什么在更改列表视图时出现乱序？

但如果我改变代码：

    <TouchableOpacity style={styles.listItem}>                    
           <Text>{rowData.msg}:{rowData.name}</Text> 
      </TouchableOpacity>

订单是对的

Answer 1

您现在正在做的是用新的数据源替换您的旧数据源。相反，您需要将以前的数据源附加到新数据源。所以像这样：

this.setState({ 
  dataSource: this.state.dataSource
    .cloneWithRows([...this.state.dataSource, ...window.abigale.msgList]) 
})