將數組中的數據顯示到復選框中，這樣如果相同的數據在另一個數組中，它將顯示在 React 中選中的復選框

Question

我有一個包含所有值的數組，比如說arr1 = [{"Name":"Mr.X"},{"Name":"Mr.Y"},{"Name":"Mr.Z"} ] 。

我還有另一個數組，其中的值很少，例如arr2 = [{"Name":"Mr.Z"}] 。

我想將 arr1 中的所有數據顯示為復選框，這樣如果數據存在於 arr2 中，它將顯示為選中的復選框。 在這種情況下，默認情況下應選中 Mr.Z，而應取消選中其他兩個。

我已經嘗試過了，但由於兩個循環，我的數據現在顯示多次。

{arr1.map((name1) =>
    arr2.map((name2) =>
    name1.Name === name2.Name ? (
        <FormControlLabel
             control={
                 <Checkbox
                     checked={true}
                     name="Name"
                     color="primary"
                     disabled={editable}
                 />
             }
             label={name.Name}
        />
        ) : (
            <FormControlLabel
                 control={
                     <Checkbox
                          name="Name"
                          color="primary"
                          disabled={editable}
                    />
                 }
                 label={name.Name}
            />
      )
))}

請讓我知道我應該采用什么方法？

Answer 1

嘗試以下方法：

arr1.map((arrItem) =>
        (
            (arr2.find(u => u.Name === arrItem.Name)) ?
            console.log(arrItem.Name + " checked")
            :
            console.log(arrItem.Name + " unchecked")
        ))

當給定您的輸入時，這會產生： output