在同一屏幕上处理多个平面列表

问题描述

在同一屏幕上有两个单位列表时，请帮助我处理不必要的重新渲染

我的屏幕需要两个平面列表-

1. 对于 HOSTS
2. 对于 QUEUE

安装组件后，我从api调用中获取数据，像这样-

{
  "hosts": [{"id":"1","name":"kyouma"},...],"queue": [{"id":"99","name":"eren"},...]
}

现在我要做的是像这样将我的主机和队列分别存储在我的redux存储中-

this.props.dispatch({
        type: GET_ROOM_HOSTS,payload: info['hosts']
      })

this.props.dispatch({
        type: GET_ROOM_QUEUE,payload: info['queue']
      })

其中 info 是从api调用接收的对象，如上所示。现在，我将 mapStateToProps 从Redux存储区到默认的屏幕组件，例如-

1. this.props.roomQueue用于队列和
2. this.props.roomHosts用于主机

我的 FlatList的是这样的

<FlatList
   data={this.props.roomQueue}
   horizontal={true}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

<FlatList
   data={this.props.roomHosts}
   numColumns={3}
   keyExtractor = {item => item.id}
   renderItem({item} => {
    return(
        <customComponent (with suitable props) ..../>
        )
    })
/>

请注意，两个 FlatList的都存在于屏幕的同一组件（React.Component）中，并显示在屏幕的不同部分（队列底部）屏幕和主机位于屏幕顶部）。此外， queue 和 hosts 彼此独立。屏幕看起来像这样

我的问题是，即使this.props.roomQueue发生了变化，具有其data={this.props.roomHosts}的 FlatList 也会重新呈现。

我如何防止这种重新呈现，以确保仅当 FlatList的对应数据发生更改时，才会重新呈现，否则不会进行呈现。我是否需要更改存储 queue 和 hosts 的方式？还是还有其他东西？

解决方法

您可以仅使用一个单位列表来执行此操作。将两个数组合并为一个，并显示一个列表中的结果。您可以在ui中使用一种类型来保留它们。

这是开发人员真正的工作，cz在同一页面和相同方向呈现2个列表绝对不是故意的。您的查询有效。