我有一個反應應用程式，其中我有以下物件串列。
const orderItems = [
{
id: 1,
name: "item 1",
price: "100",
availableQty: 2,
out: ""
},
{
id: 2,
name: "item 2",
price: "100",
availableQty: 2,
out: ""
},
{
id: 3,
name: "item 3",
price: "100",
availableQty: 2,
out: ""
},
{
id: 4,
name: "item 4",
price: "100",
availableQty: 2,
out: ""
}
];
orderItems我通過串列進行映射并使用checkbox. 我有一個名為的狀態selectedItem，當檢查復選框時，新物件將selectedItem與以下代碼id中orderItems所示添加到如此。
const handleSelect = (e, item) => {
const { checked } = e.target;
const newObj = {
id: item.id,
isAdded: true,
reason: "",
issue: "",
availableStock: ""
};
if (checked) {
setselectedItem((previousState) => [...previousState, newObj]);
}
if (checked === false) {
const filteredItems = selectedItem.filter(
(singleItem) => singleItem.id !== item.id
);
setselectedItem(filteredItems);
}
};
在反應應用程式中，我映射orderItems并顯示name帶有復選框。當復選框被選中時，我使用 of 添加一個新物件selectedItem，id如果orderItems為selectedItem空，我將 a 顯示為“串列為空”。如果復選框被選中，我會input在下面顯示一個標簽name，如果它沒有被選中，我會顯示一個label帶有“未選中”文本的標簽，如下面的代碼所示。
<div className="app">
{items.map((item) => (
<div className="issue">
<input type="checkbox" onChange={(e) => handleSelect(e, item)} />
<label>{item.name}</label>
{selectedItem.length > 0 ? (
<>
{selectedItem.map((singleItem) =>
singleItem.id === item.id ? (
<input type="number" />
) : (
<label>not selected</label>
)
)}
</>
) : (
"list is empty"
)}
</div>
))}
</div>
這里的問題是，當一個專案是 時checked，它input在所選專案下顯示標簽并在其他專案下顯示“未選擇”標簽，但如果我選擇兩個復選框，則未選擇標簽和輸入標簽都會顯示。如果我選擇 3 個復選框，則未選擇的標簽會顯示兩次輸入標簽。
我想要的是僅在選定專案下顯示輸入標簽，并在未選中專案下顯示未選定標簽。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/444842.html
標籤：javascript 数组 反应 反应钩子 jsx
上一篇：如何將1d陣列的值復制到2d？