Javascript 重新渲染后平面列表未正确排序

我有一个简单的数据列表，我正试图根据它们的日期按顺序排序。当应用程序第一次启动时，列表是正确的，但是如果用户添加了一个事件，然后给它一个时间，它将不会将其排序到列表的其余部分，只有上面没有日期或在当前会话期间输入的项目。然后，如果我刷新了确切的数据，它将被正确地放入列表中

我不确定为什么当用户处于活动会话中时，flatlist没有正确地重新呈现，但在刷新应用程序时却可以完美地工作

我的公寓名单-

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>
    );
  }

render（）{
const items=uu.sortBy（this.props.todos，（item）=>{
返回项目.日期；
});
返回(
this.setState（{textInput}）}
addNewTodo={this.addTodo.bind（this）}
textInput={this.state.textInput}
/>
index.toString（）}
renderItem={（{item}）=>{
返回(
this.props.removeTodo（项目）}
/>
);
}}
/>
);
}

相同的组件尝试不使用项会产生相同的结果-

<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>

this.setState（{textInput}）}
addNewTodo={this.addTodo.bind（this）}
textInput={this.state.textInput}
/>
{
返回项目.日期；
})}
extraData={this.props.todos}
keyExtractor={（项，索引）=>index.toString（）}
renderItem={（{item}）=>{
返回(
this.props.removeTodo（项目）}
/>
);
}}
/>

既然项目在render方法中，为什么它不能正确地对整个列表进行重新排序，而只对当前用户会话中没有日期的项目进行重新排序

---

如果需要的话，我可以提供更多的代码，但我认为问题在于我的平面列表。

如文档中所述，平面列表是一个纯组件！。这意味着在初始渲染后，它会检查道具的更改以重新渲染列表。从查看代码开始，尝试给出

extraData={items}

编辑：

---

根据评论中提出的问题，您可以在设置为状态之前对项目进行排序，并仅使用平面列表中的数据进行渲染。还记得在第一次设置时对数据进行排序。下面是一个可行的方法，您应该将应用程序的排序逻辑移到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>
)}

render（）{
返回(
this.setState（{textInput}）}
addNewTodo={this.addTodo.bind（this）}
textInput={this.state.textInput}
/>
项目（日期）}
extraData={this.props.todos}
keyExtractor={（项，索引）=>index.toString（）}
renderItem={（{item}）=>{
返回(
this.props.removeTodo（项目）}
/>
);
}}
/>
)}

我尝试了这个，但它仍然存在与

extraDate={this.state}相同的问题

您可以对项目进行排序并将其设置为state吗？您将如何操作？我在状态中创建了项，并尝试在对项进行排序后调用setState，但现在得到了一个超过最大深度的不变冲突。我认为它不会起作用，因为一旦添加事件，日期将不可用。以后再做。因此，当创建数字时，您立即获得数字的方式我无法为我的应用程序复制。您最初是如何对项目进行排序的？如果没有某种顺序，您无法对项目列表进行排序。