web-dev-qa-db-ja.com

反応ネイティブFlatListのソート

FlatListをアルファベット順に並べ替えるにはどうすればよいですか？

export default function PartnersList(props) {
  const { partners, onPartnerDetails } = props;

  return (
    <FlatList
      style={layout.list}
      contentContainerStyle={layout.listContainer}
      numColumns={2}
      data={partners}
      renderItem={({ item }) => (

        ...
javascriptreactjsreact-nativesorting
6
J.dev

partnersをソートすると、トリックができます。

export default function PartnersList(props) {
  const { partners, onPartnerDetails } = props;

  return (
    <FlatList
      style={layout.list}
      contentContainerStyle={layout.listContainer}
      numColumns={2}
      data={partners.sort((a, b) => a.localeCompare(b))}
      renderItem={({ item }) => (

        ...

これは、partnersが文字列の配列の場合に機能します。

オブジェクトの配列の場合、そのオブジェクト内の文字列でソートする必要があります。

たとえば、パートナーにnameプロパティがある場合、並べ替えは次のようにする必要があります。

....
data={partners.sort((a, b) => a.name.localeCompare(b.name))}
....
11
kiarashws