Как правильно отобразить несколько Flatlist с функцией карты? - PullRequest
Новая
       23

Как правильно отобразить несколько Flatlist с функцией карты?

0 голосов
/ 09 апреля 2019

У меня есть проблема, которую я не совсем понимаю.

Я хотел бы отображать сообщения, содержащиеся в массиве, используя несколько плоских списков.Затем мне придется сгруппировать их по дате.

Сообщения фактически соответствуют серии вопросов и ответов из чата, где каждое сообщение записывается в автономную базу данных (используется 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>
      );
    }
}

Проблема IЯ не понимаю, что функция renderLogItem для вызова компонента LogItem никогда не вызывается, пока в журналах отображается массив ItemListByDate.Сообщения не отображаются, у меня просто серый фон компонента ScrollView.

С другой стороны, если я использую тестовый массив вместо this.state.messages с функцией карты, сообщение отображается правильно винтерфейс и renderLogItem вызывается правильно.

Я понимаю, что когда мой компонент вызывается в первый раз, состояние пустое, и переключение на функцию componentDidMount в моем случае инициирует обновление состояния и вызывает повторную визуализацию.Это также вызывает функцию карты для вызова и обычно отображает каждое сообщение

Может быть, это связано с проблемой отображения, когда сообщения будут скрыты, поскольку начальное состояние сообщений пустое?

Заранее спасибо за помощь!

1 Ответ

0 голосов
/ 10 апреля 2019

Первая мысль о том, что это связано с тем, что this.IfeelMessagesBusiness.getAllIfeelMessages() является асинхронным.Поэтому при первом вызове метода рендеринга он пытается отобразить все неопределенное и никогда не обновляется.

Не могли бы вы попробовать flatlist из Flatlist, может быть?

...