リアクション-アレイからアイテムを削除

7843 ワード
テキストリンク
シナリオの削除UserList.js構成部品の修正
  • add.jsonRemoveアイテムを受け取ります.
    • function UserList({users, onRemove}){
    return (
        <>
        {
            users.map(
                user => (<User 
                    user={user} 
                    key={user.id}
                    onRemove={onRemove}/>)
            )
        }   
        </>
    )
}
  • UserList中User素子もonRemoveを受ける.
    • function User({user, onRemove}){
    const {username, email,id} = user
    return(
        <div>
            <b>{username}</b> <span>({email})</span>
            <button onClick={() => onRemove(id)}>삭제</button>
        </div>
    )
}
    ※onClickはもともとそうではなかったのでしょうか?

  • ()=>onRemove(id)のようなフォーマットは、新しい関数を宣言します.
    説明するには、「ボタンを押しながらonRemove関数を呼び出しますが、idをパラメータとして使用します.」特定のid値を持つ配列を削除することを示す.
  • App.jsのonRemove関数宣言
    • const onRemove = id => {
  setUsers(users.filter(user => user.id !==id) );
}
    ステータスをsetusersに変換filterを使用して、この条件のTRUE値を配列内の要素にのみ追加します.選択したid値を配列内の要素が持つidと比較し、一致しないものを配列に追加します.同じid値を持つ配列は追加しません.
    したがって、選択したid値の要素が削除されます!
    関数が宣言されている場合は、必要な構成部品に関数情報を渡すことも忘れないでください.onRemoveを受信するコンポーネントはUserListであるため、onRemove={onRemove}を追加する必要がある.
    return (
    <div style={style}>
     <CreateUser username={username} email={email} onChange={onChange} onCreate={onCreate}/>
     <UserList users = {users} onRemove={onRemove}/>
    </div>
  );
    実行してみましょう.

    ※User構成部品にonRemove関数を再作成しない場合、{onRemove(id)}に変更するとどうなりますか?

    うん.並べられた要素がすべて消えた.どうしてこんなことになったの?{onRemove(id)}関数のインポートではなく呼び出し関数を表します.
    したがって、レンダリングすると、関数が呼び出されて消えます.
    ボタンをクリックしてonRemoveを呼び出す場合は、「関数を呼び出す」ではなく「関数」をインポートする必要があります.() => onRemove(id)呼び出し関数に相当する関数.
    インデックスとクエリー最適化シリーズの2---explain理解
    recyclerview+viewpager多分類fragmentインタフェース擬京東分類インタフェースを実現