谁能解释"items.map((item) =>item.id === id ? { ...item, checked: !item.checked } : item"？

Question

谁能解释">items.map((item) =>item.id === id ？{ ...项目，已选中：！项目.已检查 } ：项目"？ 我只是想出了这种例子，不知道是否正确。(如果 "onChange={() => Check(2)"} 第一个循环：

const listItems = items.map(({id: 1,checked: true,item: "Item 1"}) =>
1 === 2 ? { {id: 1,checked: true,item: "Item 1"}, checked: !True } : "Item 1"
);

第二循环：

const listItems = items.map(({id: 2,checked: true,item: "Item 2"}) =>
2 === 2 ? { {id: 2,checked: false,item: "Item 2"}, checked: !false} : "Item 2"
);

第三循环：

const listItems = items.map(({id: 3,checked: true,item: "Item 3"}) =>
3 === 2 ? { {id: 3,checked: false,item: "Item 3"}, checked: !false} : "Item 3"
);

法典：

const Content = () => {
const [items, setItems] = useState([
{
id: 1,
checked: true,
item: "Item 1"
},
{
id: 2,
checked: false,
item: "Item 2"
},
{
id: 3,
checked: false,
item: "Item 3"
}
]);
const Check = (id) => {
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setItems(listItems);
};
return (
<main>
<ul>
{items.map((item) => (
<li key={item.id}>
<input
type="checkbox"
onChange={() => Check(item.id)}
checked={item.checked}
/>
<label
style={item.checked ? { textDecoration: "line-through" } : null}
onDoubleClick={() => Check(item.id)}
>
{item.item}
</label>
</li>
))}
</ul>
</main>
);
};

Answer 1

这是正确的，但是每次都可以通过使用find或findIndex(find和find index做什么时，它会立即返回，当您知道ID和索引号时，您会遍历所有对象，但是可以更改，因此我认为id将唯一

const Check = (givenId) => {
let updatedUserList = [...items]
const objIndex = updatedUserList.findIndex(user => user.id == givenId);
updatedUserList[objIndex].checked = !updatedUserList[objIndex].checked;
setItems(updatedUserList)
}

Answer 2

items.map((item) =>item.id === id ? { ...item, checked: !item.checked } : item"?

1. items.map()首次遍历项数组
2. (item) => item.id === id每个项目上，检查是否item.id === id
3. ? { ...item, checked: !item.checked }如果item.id checks id那么你反转item.checked的值，如果不是，那么你让它

如果您打算根据其 id 反转复选框或 wtv，那么此代码一定是您想要的！