刷新组件的一部分时出现问题



你好,我在刷新组件时遇到问题,它不起作用,在控制台日志中显示正确的数据。我想在点击div后将点击的元素更改为true,并将更改后的类名添加到该元素中

下面是jsx

{tabObjects.map((item) => (
<div
key={item.key}
id={item.key}
className={item.isChecked ? checked : notChecked}
onClick={() => selectItem(item.key)}
>
<i className={item.icon}></i>
<p className="hide-sm">{item.pText}</p>
</div>
))}

点击selectItem后,我想将类名更改为checked,其余的设置为checked为false,所以:

const selectItem = (e) => {
tabObjects.map((item) => {
item.isChecked = false;
if (e === item.key) {
item.isChecked = true;
}
});
setTabObjects(tabObjects);
};

和样本数据json

const [tabObjects, setTabObjects] = useState([
{
key: "sample1",
isChecked: true,
icon: "sample1i",
pText: "Test text",
},
{
key: "sample2",
isChecked: false,
icon: "sample2i",
pText: "Test text",
},

]);
let checked = "sampleClass checked";
let notChecked = "sampleClass";

我做错了什么?点击任何div,控制台日志运行良好

原因是缺少return语句。
const selectItem = (e) => {
const objects = tabObjects.map((item) => {
item.isChecked = false;
if (e === item.key) {
item.isChecked = true;
}
return item;
});
setTabObjects(objects);
};

最新更新