reactjs/javascriptのオブジェクトの別の配列にオブジェクトを挿入

Question

私はreactJsアプリケーションでCollection Visit Planを実装しようとしていました。

基本的にはSOD（Start of Day）時間のスーパーバイザープランニングから開始し、フィールドコレクションオフィサーの収集訪問を手配します。

初期データ訪問計画は、以下のオブジェクトの配列としてAPIフォームから受信されています

intialVisitPLanData:[{ 
      id:1, 
      custName:'Mr. John', 
      address:'St. Lorem ipsum dolor sit.', 
      fieldcoll:'Officer 01', 
      isVisited:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
     }, 
     { 
      id:2, 
      custName:'Mr. Jack', 
      address:'St. Lorem ipsum dolor sit.', 
      fieldcoll:'Officer 02', 
      isVisited:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
      isWarnLetter1:null, 
     }, 
     ... more objects here 
    ] 

私はテーブルの行としてこのデータをレンダリングし、各列にあるチェックボックスを置くことができました。したがって、スーパーバイザは、選択したチェックボックスに基づいて、どの顧客を希望するかを選択できます。

質問は、私ドン

example : 
object structure ready to inserted to new object 
{id:null,custname:null,etc} 

* initial data : 
this.state = { 
    visitPlan:[] 
} 

（チェックされていinitialVisitPlanData）どのように私は（キーオブジェクトプロパティ）これらの選択された行に基づいてオブジェクトの新しいvisitPlan配列を作成し、初期オブジェクト構造を保持んですこの要件にアプローチする方法はわかりません。事前

Answer 1

で

おかげでここにあなたのための迅速なデモです：

class MyApp extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     selectedItems: new Set(), // which plans we have "checked". 
 
     intialVisitPLanData:[{ 
 
      id:1, 
 
      custName:'Mr. John', 
 
      address:'St. Lorem ipsum dolor sit.', 
 
      fieldcoll:'Officer 01', 
 
      isVisited:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
     }, 
 
     { 
 
      id:2, 
 
      custName:'Mr. Jack', 
 
      address:'St. Lorem ipsum dolor sit.', 
 
      fieldcoll:'Officer 02', 
 
      isVisited:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
      isWarnLetter1:null, 
 
     } 
 
     ] 
 
    }; 
 
    } 
 
    
 
    toggleItem = (id) => { 
 
    let tempSet = new Set(this.state.selectedItems); 
 
    if (!tempSet.delete(id)) { // try and delete an item. If it fails, it didn't exist before... 
 
     tempSet.add(id); // ...so we add it instead. 
 
    } 
 
    this.setState({selectedItems: tempSet}); 
 
    } 
 
    
 
    create =() => { 
 
    let arr = []; 
 
    this.state.selectedItems.forEach((id) => { // for each "checked" item... 
 
     let data = this.state.intialVisitPLanData.find((item) => { 
 
     if(id === item.id) return true; // ... find and return the initialVisitPlanData with id equal to the selected value 
 
     return false; 
 
     }); 
 
     arr.push(Object.assign({}, data)); // push it into our new array 
 
    }); 
 
    console.log(arr); 
 
    } 
 
    
 
    render() { 
 
    return (
 
     <div> 
 
     {this.state.intialVisitPLanData.map(item => { 
 
      return (
 
      <div id={item.id}> 
 
       <input type="checkbox" checked={this.state.selectedItems.has(item.id)} onChange={this.toggleItem.bind(this, item.id)} /> 
 
       <span>{item.custName}</span> 
 
      </div> 
 
     )}) 
 
     } 
 
     <button onClick={this.create}>Create</button> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="app"></div>

私は状態にあなたのinitialVisitPLanDataを追加した（あなたが適切camel-にそれを変更する場合がありますケース）と、リスト内で選択した項目を追跡するSet（selectedItems）があります。

元のオブジェクトに変更を加えることなく、コピーしたプランデータの配列を作成するボタンもあります。