反应,迭代键条件呈现

Question

我的问题是关于键的迭代。我希望与classNamegreenButton的id应用于与classNameyellowButtononClick的id。问题是，' yellowButton '的id总是落后于一个，即使他们访问相同的变量。

TL,博士

buttonId是x哪里className =greenButton和x-1哪里className =yellowButton我怎么解决这个问题?

const renderTableData = () => {
let id = 1;
return (
<tr>
{days.map((val) => (
<td>
{timeSlot.map((time, i) => {
let buttonId = id++;
if (myBookings().result.includes(id)) {
return (
<button
id={buttonId}
className="yellowButton"
onClick={() => cancelBooking()}
>
{time} {console.log({ buttonId }, { id })} // buttonId is 1 & id is 2
</button>
);
} else if (occupiedSlots().result.includes(id)) {
return (
<button id={buttonId} className="redButton">
{time}
</button>
);
} else {
return (
<button
id={buttonId}
className="greenButton"
onClick={() => {
BookSlot({ id: buttonId });
console.log({ buttonId }); // is 2
}}
>
{time}
{buttonId}
</button>
);
}
})}
</td>
))}
</tr>
);
};

Answer 1

我认为let buttonId = id++;是导致你这个问题的原因。尝试使用let buttonId = ++id;(前递增而不是后递增)。

这是我在某处读到的，可能会回答你的问题:"preincrement (++ I)为I的值加1，然后返回I;相比之下，i++返回i，然后给它加1，这在理论上导致在应用自增操作之前创建一个临时变量来存储i的值"

更多阅读可以在这里找到