如果输入值与不同数组中的一个值匹配，请检查复选框列表

Question

我有一个对象数组（array1），我正在循环并以表格形式呈现为 type="checkbox" 的一系列输入。 我将输入值设置为 object.id，并将输入名称设置为 object.name。

然后我有第二个数组（array2），它只是一个值数组。 我需要将array1 与array2 进行比较，如果给定输入的值与array2 中的值之一匹配，则设置checked="true"。 如果不是，则不要检查。 它基本上是自动检查任何已经具有存在于 array2 中的值的输入。

let array1 = [
{id: 28, name: "Action"}, 
{id: 35, name: "Comedy"},
{id: 80, name: "Crime"},
{id: 99, name: "Documentary"}
{id: 18, name: "Drama"}
{id: 10751, name: "Family"}
]

let array2 = [1, 65, 28, 12, 18]

这是我的循环：

for(let i in array2) {
   for(let j in array1) {
      if(array2[i] == array1[j].id) {
          return (
          <div>
             <label>name here</label>
             <input type="checkbox" id={array1[j].id} value={array1[j].id} name={array1[j].name} checked='true'/>
          </div>
          )
    }
      if(array2[i] != array1[j].id) {
           return (
           <div>
               <label>name here</label>
               <input type="checkbox" id={array1[j].id} value={array1[j].id} name={array1[j].name}/>
           </div>
          )
   }

显然，如果我当前的代码看起来很愚蠢，这不起作用并且很抱歉。 我已经有一段时间了，我完全不知道如何完成这项工作。

Answer 1

您可以通过Array.map和Array.includes完成此操作：

return array1.map(({id, name}) => (
  <input
    key={id}
    name={name}
    checked={array2.includes(id)}
  />
))

Answer 2

您可以 map array1到复选框输入，并简单检查array2是否包含来自array1元素的id属性。

{array1.map(({ id, name }) => (
  <label key={id}>
    {name}
    <input
      type="checkbox"
      value={id}
      name={name}
      defaultChecked={array2.includes(id)}
    />
  </label>
))}