将 object 插入 reactjs/javascript 中的另一个 object 数组

Question

您好正在尝试在我的 reactJs 应用程序上实施 Collection 访问计划。

基本上，它从 SOD（一天开始）时间的主管计划开始，为现场 Collection 官员安排 collection 访问。

初始数据访问计划是从 API 表单中接收的，形式为下面的 objects 数组：

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
    ]

我已经设法将此数据呈现为 table 行并在每一行上放置复选框。因此主管可以 select 根据 select 编辑的复选框他想要哪些客户。

问题是我如何根据那些 selected 行创建一个新的 objects 的 visitPlan 数组并保留初始 object 结构（object 键属性)(已经勾选的initialVisitPlanData)

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

* initial data :
this.state = {
   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 添加到状态（你可能想将其更改为适当的驼峰式大小写）以及一个 selectedItems 集合，用于跟踪你 [=26] 的项目=] 在列表中。

还有一个按钮可以创建复制计划数据的数组，而不改变原始对象。

将 object 插入 reactjs/javascript 中的另一个 object 数组

insert object to another array of object in reactjs/javascript

immutability

reactjs