[React] 9. 動的更新配列

7993 ワード
はんのう React テキストリンク
私たちはいつでもあなたが間違いを指摘することを歓迎します.
応答アプリケーションでの配列の動的更新
const [users, setUsers] = useState([
  {
    id: 1,
    username: "uncyclocity",
    email: "[email protected]",
  },
  {
    id: 2,
    username: "yoong_kim",
    email: "[email protected]",
  },
  {
    id: 3,
    username: "sblee",
    email: "[email protected]",
  },
]);
  • 反応アプリケーション内で配列を更新するには、上記の配列を状態値に設定する必要があります.
  • を不変性に保ち、配列を更新するには、新しい配列を返す配列関数を使用する必要があります.👉 concat、filter、mapなどがあります.
    • アレイ要素の追加
  • ハッシュ演算子
    • を使用
       const user = {
     id: nextId.current,
     username,
     email
   }
   
   // 복붙 된 기존 users 배열의 요소들과 새로 추가할 요소를 포함한 새 배열
   setUsers([...users, user])
    タイル関数concatを使用して、既存のタイルに必要な要素を追加する新しいタイルを返します.
       const user = {
     id: nextId.current,
     username,
     email
   }
   
   // 기존 users에 새 요소가 추가 된 새 배열
   setUsers(users.concat(user));
  • 配列要素を追加すると、一意の値を表すref変数値が1増加し、後続のオブジェクト文字要素が追加されます.
    •    nextId.current += 1;
    アレイ要素の削除
  • は、指定された条件を満たす配列要素のみを選択し、新しい配列に戻る配列関数filterを利用する.
    • // 지정한 고유값(id)과 동일하지 않은 요소들만 추려 반환한다.
const onRemove = (id) => {
  setUsers(users.filter((user) => user.id !== id));
};
    パターン要素の変更
  • で指定された関数が呼び出されると、そこから抽出された値を利用して新しい配列の配列関数mapが返される.
    • // 지정한 고유값(id)과 동일한 요소인 객체 리터럴의 active 값을 반전시켜 반환하고,
// 동일하지 않은 고유값의 요소는 그냥 반환시킨다.
const activer = (id) => {
  setUsers(
    users.map((user) =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};
    References
    「12.userefを使用して構成部品に変数を作成する」 .velopert
    「13.プロジェクトをシナリオに追加」 .velopert
    「14.配列から項目を削除する」 .velopert
    「タイルの修正」 .velopert
    「React Hooks:useref()関数」 .xiubindev
    iOS H 5容器のいくつかの探究(一):UIWebViewとWKWebViewの比較と選択
    adbは設備に接続できない