Question

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

基本上，它是从SOD（一天开始）时间的主管计划开始，为现场采集官安排一次收集访问。

初始数据访问计划是从API表单接收的，其中包含以下对象数组：

wp_users

我设法将此数据渲染为表格行并在每行上放置复选框。因此，主管可以根据所选的复选框选择他想要的客户。

问题是我如何基于这些选定的行创建一个新的visitPlan对象数组并保留初始对象结构（对象键属性）（已检查的initialVisitPlanData）

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
    ]

我不知道接近这个要求的方法。

提前致谢

Answer 1

以下是您的快速演示：

＆＃13;

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"));

＆＃13;

<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>

＆＃13;

我已将您的initialVisitPLanData添加到状态（您可能希望将其更改为正确的驼峰式广告）以及selectedItems设置，以跟踪您在列表中选择的项目。

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

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

1 个答案: