解释item.id === id？{ ...item，选中：!item.checked }：item
解释item.id === id？{ ...item，选中：!item.checked }：item
提问于 2022-06-12 07:42:08
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
)特别是item.id和id有什么区别？最后为什么要使用: item呢？
下面是完整的代码，注意代码不是我正在处理的东西，它是一个教程，还有更多的代码需要编写
import React from "react";
import { useState } from "react";
import { FaTrashAlt } from "react-icons/fa";
const Content = () => {
const [items, setItems] = useState([
{
id: 1,
checked: false,
item: "One half bag of cocoa covered",
},
{
id: 2,
checked: false,
item: "Item 2",
},
{
id: 3,
checked: false,
item: "Item 3",
},
]);
const handleCheck = (id) => {
console.log(`key: ${id}`);
const listItems = items.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
);
setItems(listItems);
localStorage.setItem("shoppinglist", JSON.stringify(listItems));
};
return (
<main>
<main>
<ul>
{items.map((item) => (
<li className="item" key={item.id}>
<input
type="checkbox"
onChange={() => handleCheck(item.id)}
checked={item.checked}
/>
<label
style={item.checked ? { color: "red" } : { color: "green" }}
onClick={() => handleCheck(item.id)}
>
{item.item}
</label>
{/* <button>Delete</button> */}
<FaTrashAlt
onClick={() => handleCheck(item.id)}
role="button"
tabIndex="0"
/>
</li>
))}
</ul>
</main>
</main>
);
};
export default Content;回答 4
Stack Overflow用户
回答已采纳
发布于 2022-06-12 07:54:20
items.map(item => )是对一个项数组的映射，项是正在映射的当前项的对象。
id是来自handleCheck函数(触发onClick)的id，它是单击项的id，而item.id是对象数组中当前项的id。
item.id === id ? { ...item, checked: !item.checked } : item使用三元操作符(它是一个简写if/else )来检查当前项的id是否与单击项的id相同
如果它是(True)，它将添加到当前的item对象checked: !item.checked中，如果它不是(False)，则返回它原来的item对象。
Stack Overflow用户
发布于 2022-06-12 07:51:53
这里的代码试图保持items数组不可变，如果您更改item.checked值而不使用它，也会修改items数组。
{ ...item, checked: !item.checked }
Id只用于收集特定的项并对其进行修改。
Stack Overflow用户
发布于 2022-06-12 07:55:39
map函数遍历列表中的所有项。每个项目都有一个id，它是list.id变量。该函数将id作为param。
然后，如果item.id等于传入的id，那么将返回一个修改过的项。如果没有，则不修改地返回iten。这就是:item最终要做的事情。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72590323
复制相关文章
相似问题
腾讯云开发者
