はアイテム

Question

を削除した後、私は名前と状態でそのスコアを持つ学生のオブジェクトの単純なリストを持っている間違ったデータをレンダリングリストを反応します。

彼らの名前は<b>{student.name}</b>にバインドされていると私は

セット状態を呼び出すことで、このリストと 再レンダリングコンポーネントからの最初の学生を削除するこれまでの時に自分のスコアは

<input type="text" defaultValue={student.score}/> 

にバインドされています2番目の生徒の入力タグは、1番目の生徒のスコアを示しています。なぜ私はそれが間違っているのか起こっているのですか？ここ

は私のコードは、あなたの代わりに、学生に固有の値のkey={index}を使用しているためですhere is mycode in jsbin

class App extends React.Component{ 
    constructor(){ 
    super(); 
    this.state ={ 
     students:[{name:"A",score:10},{name:"B",score:20},{name:"C",score:30}] 
    } 
    } 

    onDelete(index){ 
    this.state.students.splice(index,1); 
    this.setState(this.state); 
    } 

    render(){ 
    return(
     <div> 
     {this.state.students.map((student,index)=>{ 
       return(
       <div key={index}> 
        <b>{student.name}</b> - <input type="text" defaultValue={student.score}/> 
        <button onClick={this.onDelete.bind(this,index)}>delete</button> 
       </div>     
      ) 
     })} 
     </div> 
    ) 
    } 
} 


ReactDOM.render(<App/>,document.getElementById("main")); 

Answer 1

です。配列は、間違ったキーを持っているし、更新されたデータを再度レンダリングするキーの変更を登録しません反応する削除インデックスの後の学生を変更された

。

代わりに...

<div key={student.name}> 

student.nameが一意であると仮定して、このようなものを使用する必要があります。

Answer 2

代わりに、インデックスのキーとして一意のIDを使用するのが無難です。あなたのJSONが一意のIDを提供しない場合、それを生成するuuid npmモジュールのようなものを使うことができます。これはリンクhttps://www.npmjs.com/package/uuidです。

あなたはそれをインポートして、

id={v4()}