Day 07.
![](https://s1.md5.ltd/image/2a5c9e5bda90c85dd1b7a238f98da30a.png)
[ map / filter ]
1️⃣ map
同じ論理を繰り返すmap
1)練習
アレイの適用
const classemates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))
-> ["철수어린이", "영희어린이", "훈이어린이"]
オブジェクトの適用
const classmate = [
{ name: "철수" }
{ name: "영희" }
{ name: "훈이" }
]
classmates.map( (el) => ({ name: `${el.name} 어린이` }) )
-> [{name: "철수 어린이"},
{name: "영희 어린이"},
{name: "훈이 어린이"}]
その他のアプリケーション
オブジェクトの追加
2)括弧は省略可能
:矢印関数のプロパティ
分かりやすい例
->かっこの欠落(修正が必要)
const add5 = () => { name: `${el.name} 어린이` }
-> 소괄호 생략하면 안된다
const add5 = () => ( { name: `${el.name} 어린이` } )
3)htmlに接続
ジャージャー麺が入っています
filter
filter
ifはゲートのようにデータをフィルタします.方式はmapと同じconst age = [10, 13, 11]
age.filter( (el) => (el >= 11) )
// 11이 넘는 데이터만 가져와줘
-> [13, 11]
filter & map
filter
age 11以上の価格map
その値に{school:[リス小学校]}の対象を加える
フルーツランキング3位を見たいだけです
あ~以前for複文の3番目の部分で中断してくれました
~今はfilterでフィルタリングしてmapで3位を繰り返す
[ refetchQuery ]
削除を確認するには削除とリフレッシュが必要です
すぐに確認できるrefetchQuery
を作ってみましょう.
しかしすべてのMutationの後にReferenceQueryを使うわけではありません!Mutation後に変更されたデータを受信できない場合に使用
seMutation関数では、referenceQueryというキーが表示されます.Apolloが提供する基本機能.const deleteBoard = async () => {
try {
const result = await deleteBoard({
variables: {boardId: router.query.boardId,},
refetchQueries: [{ query: FETCH_BOARDS,
variables: { boardId: router.query.boardId }
}]
});
} catch (error) {
console.log(error);
}
};
配列でクエリーを開始し、クエリー内の変数を再設定すると、Mutationが正常に完了するとReferenceQueryが実行されます.
[ key ]
キーが存在する場合は、キー値のみを比較して、不要な比較やレンダリングを排除します.
このためkeyは、信頼性の高い一意性を提供するために、非繰返し値として指定する必要があります.(鍵が指定されていない場合はindexが自動的に鍵として使用されますが、これは良い方法ではなく、警告です.)
したがって、React公式ドキュメントでは、idをKey値として推奨します.
効果的に反応するためにmapを書くときは必ずid値を書きます
キーでLinkedIndexを入力できます
以下の3つの条件を満たすとよい.
1.静的データ.未計算で変更されていないデータ
2.マッピング中のすべてのデータにidがない
3.データが並べ替えられていないか、フィルタされていない.(そのままにし続ける)
Reference
この問題について(Day 07.), 我々は、より多くの情報をここで見つけました
https://velog.io/@wisdoom03/22.01.18-Day-07
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const classemates = ["철수", "영희", "훈이"]
classmates.map((el) => (el + "어린이"))
-> ["철수어린이", "영희어린이", "훈이어린이"]
const classmate = [
{ name: "철수" }
{ name: "영희" }
{ name: "훈이" }
]
classmates.map( (el) => ({ name: `${el.name} 어린이` }) )
-> [{name: "철수 어린이"},
{name: "영희 어린이"},
{name: "훈이 어린이"}]
const add5 = () => { name: `${el.name} 어린이` }
-> 소괄호 생략하면 안된다
const add5 = () => ( { name: `${el.name} 어린이` } )
const age = [10, 13, 11]
age.filter( (el) => (el >= 11) )
// 11이 넘는 데이터만 가져와줘
-> [13, 11]
削除を確認するには削除とリフレッシュが必要です
すぐに確認できる
refetchQuery
を作ってみましょう.しかしすべてのMutationの後にReferenceQueryを使うわけではありません!Mutation後に変更されたデータを受信できない場合に使用
![](https://s1.md5.ltd/image/7435710ce75be6b467a75cf635d3ed26.png)
seMutation関数では、referenceQueryというキーが表示されます.Apolloが提供する基本機能.
const deleteBoard = async () => {
try {
const result = await deleteBoard({
variables: {boardId: router.query.boardId,},
refetchQueries: [{ query: FETCH_BOARDS,
variables: { boardId: router.query.boardId }
}]
});
} catch (error) {
console.log(error);
}
};
配列でクエリーを開始し、クエリー内の変数を再設定すると、Mutationが正常に完了するとReferenceQueryが実行されます.[ key ]
キーが存在する場合は、キー値のみを比較して、不要な比較やレンダリングを排除します.
このためkeyは、信頼性の高い一意性を提供するために、非繰返し値として指定する必要があります.(鍵が指定されていない場合はindexが自動的に鍵として使用されますが、これは良い方法ではなく、警告です.)
したがって、React公式ドキュメントでは、idをKey値として推奨します.
効果的に反応するためにmapを書くときは必ずid値を書きます
キーでLinkedIndexを入力できます
以下の3つの条件を満たすとよい.
1.静的データ.未計算で変更されていないデータ
2.マッピング中のすべてのデータにidがない
3.データが並べ替えられていないか、フィルタされていない.(そのままにし続ける)
Reference
この問題について(Day 07.), 我々は、より多くの情報をここで見つけました
https://velog.io/@wisdoom03/22.01.18-Day-07
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について(Day 07.), 我々は、より多くの情報をここで見つけました https://velog.io/@wisdoom03/22.01.18-Day-07テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol