Плоский список не сортируется должным образом после рендеринга

Question

У меня есть плоский список данных, которые я пытаюсь отсортировать по порядку на основе их даты. При первом запуске приложения список корректен, однако, если пользователь добавляет событие, а затем дает ему время, он не будет сортировать его в остальной части списка, только над элементами, которые не имеют даты или были также введены во времятекущая сессия. Затем, если я обновлю эти точные данные, они будут правильно помещены в список.

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

Мой плоский список -

render() {
    const items = _.sortBy(this.props.todos, (item) => {
      return item.date;
    });
    return (
      <View style={{ height: HEIGHT }}>
          <AddTodo
            textChange={textInput => this.setState({ textInput })}
            addNewTodo={this.addTodo.bind(this)}
            textInput={this.state.textInput}
          />
          <View style={styles.listContainer}>
            <FlatList
              data={items}
              extraData={this.state}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({ item }) => {
                return (
                  <TodoItem
                    todoItem={item}
                    deleteTodo={() => this.props.removeTodo(item)}
                  />
                );
              }}
            />
          </View>
      </View>
    );
  }

Тот же компонент, пытающийся без элементов, дает тот же результат -

<View style={{ height: HEIGHT }}>
          <AddTodo
            textChange={textInput => this.setState({ textInput })}
            addNewTodo={this.addTodo.bind(this)}
            textInput={this.state.textInput}
          />
          <View style={styles.listContainer}>
            <FlatList
              data={_.sortBy(this.props.todos, (item) => {
                return item.date;
              })}
              extraData={this.props.todos}
              keyExtractor={(item, index) => index.toString()}
              renderItem={({ item }) => {
                return (
                  <TodoItem
                    todoItem={item}
                    deleteTodo={() => this.props.removeTodo(item)}
                  />
                );
              }}
            />
          </View>
      </View>

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

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

Answer 1

Вы должны переместить логику сортировки вашего приложения в метод renderItem. Я бы также установил this.props.todos как extraData, чтобы FlatList запускал рендеринг при изменении данных.

render() {
  return (
    <View style={{ height: HEIGHT }}>
      <AddTodo
        textChange={textInput => this.setState({ textInput })}
        addNewTodo={this.addTodo.bind(this)}
        textInput={this.state.textInput}
      />
    <View style={styles.listContainer}>
      <FlatList
        data={items.sortBy(this.props.todos, item => item.date)}
        extraData={this.props.todos}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => {
          return (
            <TodoItem
              todoItem={item}
              deleteTodo={() => this.props.removeTodo(item)}
            />
          );
        }}
      />
    </View>
  </View>
)}

Answer 2

FlatList - это Pure Component, как упомянуто в документации!. Это означает, что после первоначального рендеринга он проверяет изменения реквизитов для рендеринга списка. При поиске вашего кода попытайтесь дать extraData={items}.

РЕДАКТИРОВАТЬ:

Из вопроса, заданного в комментариях, вы можете отсортировать элементы перед установкой в ​​состояние и просто визуализировать с использованием данных в FlatList. Также не забудьте отсортировать данные при настройкев первый раз. Вот рабочая Демо