insérer un objet dans un autre tableau d'objets dans reactjs/javascript

Question

Salut essayait d'implémenter un plan de visite de collection sur mon application de reactJs. Fondamentalement, il commence à partir de la planification du superviseur à l'heure de début de journée (SOD) pour organiser une visite de collecte pour l'agent de recouvrement sur le terrain.

le plan initial sont données sur les visites reçoivent de la forme API comme un tableau d'objets ci-dessous:

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 
    ] 

J'ai réussi à rendu de ces données en tant que lignes de la table et de mettre sur chaque case à cocher lignes. Ainsi, Supervisor peut sélectionner les clients qu'il souhaite en fonction de la case à cocher sélectionnée.

La question est de savoir comment puis-je faire un nouveau tableau visitPlan d'objets en fonction de ces lignes sélectionnées et conserver la structure de l'objet initial (objet propriété clé) (la initialVisitPlanData qui a été vérifié)

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

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

Je don Je ne connais pas la méthode pour aborder cette exigence.

Merci à l'avance

Answer 1

Voici une démonstration rapide pour vous:

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>

J'ai ajouté votre initialVisitPLanData à l'état (vous pouvez changer en chameau bon case) ainsi qu'un selectedItems Set qui garde trace des éléments que vous sélectionnez dans la liste.

Il y a aussi un bouton qui crée un tableau des données de plan copiées, sans muter l'objet original.