reactjs - 如何用来自两个不同数组的数据表示一个复选框？

Question

我正在尝试使用来自两个数组的数据呈现一些复选框，这些数组是一个数组中的 id 和 name 以及另一个数组中的计数/长度。前任：

const count = [[{"1":"91"}],[{"1":"1"}],[{"1":"0"}]]
const type = [{id: "1", name: "iPhone"}, {id: "2",name: "Samsung"}, {id: "3",name: "Huawei"}]

我试图在另一个地图函数中使用地图函数。

var text=type.map(function(itm,i){
   return [<label key={itm.id}><input type="checkbox" key={itm.id} value={itm.id} name="search"/>{itm.name}</label>, (count && count.length > 0 && count.map( item =>
                      item.length > 0 && item.map( el =>
                          Object.keys(el).length > 0 &&
                          Object.keys(el).map(val => <p>{el[val]}</p>)
                      )
                  )[i])];
}).join(' ');

这是应该如何表示的。[] 是复选框。

[] Iphone (91)
[] samsung (1)
[] huawei (0)

示例链接https://stackblitz.com/edit/react-6naael

标签： reactjs

Answer 1

您可以遍历计数数组并添加一个新属性到类型数组，该数组基于 id 保存计数数组中的项目总数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<div id="root"></div>

<script type="text/babel">
const count = [[{ "1": "91" }], [{ "1": "1" }], [{ "1": "0" }]]
let type = [{ id: "1", name: "iPhone" }, { id: "2", name: "Samsung" }, { id: "3", name: "Huawei" }]


for (let i = 0; i < count.length; i++) {
  Object.keys(count[i][0]).forEach(key => {
    const index = type.findIndex(x => x.id === key);

    const total = parseInt(count[i][0][key], 10);

    type[index].total ? type[index].total += total : type[index].total = total;
  })
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  render() {

    const check = type.map(item => {
      return (
        <div>
        <input type="checkbox" id="check3"/> {`${item.name} (${item.total ? item.total : 0})`}
        </div>
      )
    })
    return (
      <div>
        {check}
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));
</script>