質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1334閲覧

react-nativeでFlatListを二つ使った際のソート(sort)について

mati7

総合スコア12

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2018/11/21 13:10

前提・実現したいこと

react-nativeにおいて、同一コンポーネント内で二つのFlatListを描画して、
下記のように「仮名五十音順」と「頻出順」の異なるsortを行いたいと考えています。

しかし、下記のコードではそれぞれのソートでデータが表示されず、両方のリストともに後に記述した頻出順で表示されてしまいます。

this.state.allFriendsと同じ内容の別のstateを作ってsortすれば実現はできますが
わざわざ同じ内容の違うstateを作るのはスマートな解決法ではないと思っています。
なにかよい方法はありますでしょうか?

該当のソースコード

react

1<FlatList 2 data={this.state.allFriends.sort((a, b) => a.kana.localeCompare(b.kana))} 3 renderItem={({ item }) => 4 <View> 5 <Text >{item.sei} {item.mei}</Text> 6 </View> 7 } 8/> 9 10<FlatList 11 data={this.state.allFriends.sort((a, b) => b.number - a.number)} 12 renderItem={({ item }) => 13 <View> 14 <Text >{item.sei} {item.mei}</Text> 15 </View> 16 } 17/> 18

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

  • sort関数は元のリストの内容も書き換えてしまうので、今回の例でいうとthis.state.allFriends.sort(...)とすることでthis.state.allFriendsの値が書き換えられてしまっていることが原因になっているようです。
  • this.state.allFriends.sort(...)[...this.state.allFriends].sort(...)に変更すると意図した通り動くのではないかと思います。
  • 適当な例ですが以下のサンプルで動作確認できています。

js

1import React from "react"; 2import { FlatList, StyleSheet, Text, View } from "react-native"; 3 4export default class App extends React.Component { 5 state = { list: [3, 1, 2, 5, 4] }; 6 render() { 7 return ( 8 <View style={styles.container}> 9 {/* 昇順 */} 10 <FlatList 11 data={[...this.state.list].sort((a, b) => a - b)} 12 renderItem={({ item }) => <Text>{item}</Text>} 13 contentContainerStyle={styles.list} 14 /> 15 {/* 降順 */} 16 <FlatList 17 data={[...this.state.list].sort((a, b) => b - a)} 18 renderItem={({ item }) => <Text>{item}</Text>} 19 contentContainerStyle={styles.list} 20 /> 21 </View> 22 ); 23 } 24} 25 26const styles = StyleSheet.create({ 27 container: { 28 flex: 1, 29 flexDirection: "row", 30 justifyContent: "center", 31 alignItems: "center", 32 backgroundColor: "#F5FCFF" 33 }, 34 list: { 35 justifyContent: "center", 36 alignItems: "center" 37 } 38});

投稿2018/11/21 15:09

ozaki25

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mati7

2018/11/21 15:18

ozaki25さん、大変迅速な回答ありがとうございます。 FlatListを使わずにmap等で実装しても同様の問題だったのconsole.logでstateを出力してみたら、確かにstateごと値が変えられており、どうしようかと思っていたのですが…このような対処法があったんですね!私のコードでも実際に確認できました。teratailははじめての利用でしたが、使ってみて本当に良かったです。本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問