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>

由于项目位于render方法中，为什么它不能正确地对整个列表进行重新排序，并且仅在当前用户会话中对没有日期的列表进行重新排序？

如有必要，我可以提供更多代码，但我认为问题必须出在我的单位列表上。

Answer 1

FlatList是文档中提到的Pure组件！这意味着在初始渲染后，它会检查道具更改以重新渲染列表。从查看您的代码开始，尝试给出extraData={items}。 / p>

编辑：

根据注释中提出的问题，您可以在设置为状态之前对项目进行排序，并仅使用FlatList中的数据进行渲染。还请记住在首次设置时对数据进行排序。这是一个有效的Demo < / p>

Answer 2

您应将应用程序的排序逻辑移至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>
)}

重新呈现后，flatlist无法正确排序

2 个答案: