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

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

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

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