如何正确显示几个带有地图功能的 Flatlist？答案

【问题标题】：How to display correctly several Flatlist with a map function?如何正确显示几个带有地图功能的 Flatlist？
【发布时间】：2019-04-09 20:36:13
【问题描述】：

我有一个不太明白的问题。

我想使用多个平面列表显示包含在数组中的消息。然后我必须按日期对它们进行分组。

消息实际上对应于聊天中的一系列问题和答案，其中每条消息都记录在离线数据库中（使用 PouchDB）。所以我想在界面中显示用户已经回答的问题，简而言之，我想查看日志。

代码如下：

const screen = Dimensions.get('screen');
const styles = StyleSheet.create({
  logsView: {
    backgroundColor: '#dddddd',
    paddingLeft: 15,
    paddingRight: 2,
    height: '100%',
  },
  dateContainer: {
    width: '75%',
    padding: 1,
    marginTop: 5,
  },
  dateContent: {
    textAlign: 'center',
  },

});

export default class ComponentPlanDetailsScreen
  extends ComeoMeAbstractScreen<PropsType, StateType> {
  static navigationOptions = {
    title: µte('MyPlans'),
    headerRight: (<View />),
  };


  constructor(props: PropsType) {
    super(props);
    this.IfeelMessagesBusiness = new IfeelMessagesBusiness();
    this.state = {
      currentDate: new Date(),
      markedDate: moment(new Date()).format('YYYY-MM-DD'),
      messages: [],
    };
  }
  componentDidMount = () => {
    // Get all messages from chat history
    this.IfeelMessagesBusiness.getAllIfeelMessages().then((result: Object) => {
      this.setState({ messages: result });
    });
  };

    // Render each item of Flatlist
    renderLogItem = ({ item }: Object) => {
      console.log(`je passe renderlogitem ${JSON.stringify(item)}`);
      return <LogItem message={item} />;
    }
    // Key for data in FlatList component
    keyExtractor = (item: Object, index: number): string => index.toString();

    render() {
      const test = [
        {
          stringValue: 'Did you take some drugs ?',
          isImage: false,
          isQuestion: true,
          questionNumber: 6,
          author: {
            id: 1,
            avatar: 'http://image.noelshack.com/fichiers/2016/47/1480031586-1474755093-risitas721.png',
            username: 'Dr Risitas',
          },
          loggedDateTime: '1552033946989',
        },
      ];
      const today = this.state.currentDate;
      const day = moment(today).format('x');
      return (
        <View>
          <Carousel
            animate={false}
            indicatorSize={10}
            height={screen.height * 0.7
            }
          >
            <View>
              <ScrollView
                style={styles.logsView}
              >
                <View>
                  {this.state.messages.map((ItemListByDate: Object): Array<Object> => {
                  console.log(`je passe array ${JSON.stringify([ItemListByDate])}`);

                    return (

                      <View key={ItemListByDate.loggedDateTime.toString()}>
                        <View style={styles.dateContainer}>
                          { (parseInt(ItemListByDate.loggedDateTime, 10) + 172800000) <= parseInt(day.toString(), 10) ?
                            <Text style={styles.dateContent}>{moment(parseInt(ItemListByDate.loggedDateTime, 10)).format('DD-MM-YYYY')}</Text>

                          :

                            <Text style={styles.dateContent}>{moment(parseInt(ItemListByDate.loggedDateTime, 10)).fromNow()}</Text>
                         }
                        </View>
                        <View>
                          <FlatList
                            data={[ItemListByDate]}
                            renderItem={this.renderLogItem}
                            keyExtractor={this.keyExtractor}
                            ref={(ref: any) => { this.flatList = ref; }}
                            onContentSizeChange={(): any => this.flatList.scrollToEnd({ animated: true })}
                            onLayout={(): any => this.flatList.scrollToEnd({ animated: true })}
                          />
                        </View>
                      </View>);
                    })
                  }
                </View>
              </ScrollView>
            </View>
          </Carousel>
        </View>
      );
    }
}

我不明白的问题是，当 ItemListByDate 数组显示在日志中时，永远不会调用调用 LogItem 组件的 renderLogItem 函数。没有消息显示，我只有 ScrollView 组件的灰色背景。

另一方面，如果我使用 test 数组而不是 this.state.messages 和 map 函数，则消息在界面中正确显示，并且 renderLogItem 被正确调用。

我了解当我的组件第一次被调用时，状态为空，在我的情况下切换到 componentDidMount 函数将触发状态更新并导致重新渲染。这也会导致地图函数调用并正常显示每条消息

可能是显示问题，因为消息的初始状态是空的，消息会被隐藏？

提前感谢您的帮助！

【问题讨论】：

标签： javascript android ios react-native react-native-flatlist

【解决方案1】：

我的第一个想法是它与this.IfeelMessagesBusiness.getAllIfeelMessages() 是异步的事实有关。所以第一次调用 render 方法时，它会尝试映射 òver undefined 并且永远不会更新。

你可以尝试做一个flatlist 的Flatlist 吗？

【讨论】：