如何对平面列表的 renerItem 中的对象列表进行排序？

Question

您好，我想对 renderItem 中的 FlatList 中的一个对象进行排序。我正在获取对象数组作为服务器响应。我想在这些对象中进行排序。我有一个带有价格的汽车列表。如果用户首先点击最低价汽车的排序按钮。我想在列表中首先显示最低价汽车。renderItem 中的item 结构如下。

单个item的展开结构如下。我想按其priceTotal对对象进行排序。

以下是我到目前为止所做的代码。请帮助找到解决方案。

示例代码

 renderItems = ({ item, index }) => {
    return (
          <CarReservationDetailComponent
            carName={item.make}
            carType={item.carType}
            carPrice1={item.priceTotal}
            mileage
            mileageText={item.autonomy + 'km. restantes'}
            imageUri={item.picture}
          />
        )
      }
    .....
    <FlatList
                  data={this.props.value.value}
                  renderItem={this.renderItems}
                  ItemSeparatorComponent={this.renderSeparator}
                  showsVerticalScrollIndicator={false}
                />

Answer 1

class ParentComponent extends Component {
  sortItemByKey = key => {
    const { items } = this.state;
    const clonedItems = items.map(item => ({ ...item }));
    clonedItems.sort(compare);
    this.setState({ items: clonedItems });

    function compare(a, b) {
      if (a[key] < b[key]) return -1;
      if (a[key] > b[key]) return 1;
      return 0;
    }
  };

  render() {
    const { items } = this.State;
    return (
      <View>
        <ChildComponent value={{ value: items }} sortByKey={this.sortItemByKey} />
      </View>
    );
  }
}

class ChildComponent extends Component {
  // you should bind this method to onclick of sort button
  onClick = () => {
    this.props.sortByKey('priceTotal');
  };

  render() {
    return (
      <FlatList
        data={this.props.value.value}
        renderItem={this.renderItems}
        ItemSeparatorComponent={this.renderSeparator}
        showsVerticalScrollIndicator={false}
      />
    );
  }
}