如何使用地图功能正确显示几个Flatlist？

Question

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

我想使用几个flatlist来显示包含在数组中的消息。然后我将按日期对它们进行分组。

消息实际上对应于聊天中的一系列问题和答案，其中每条消息都记录在离线数据库中（使用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组件的灰色背景。

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

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

也许是由于显示问题，消息将被隐藏，因为消息的初始状态为空？

预先感谢您的帮助 ！

Answer 1

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

你能尝试做flatlist的Flatlist吗？