数组对象不更新在反应?

Question

我有一个应用程序，用户将选择一个座位，然后点击预订，座位将变灰。由于某些原因，我的座位对象数组在数组中没有更新，座位也没有变灰。当我有时记录座位时，isReserved为真，当我再次记录时，它又回到假。

代码如下:

const seats: any[] = [
{ id: 1, isSelected: false, isReserved: false },
{ id: 2, isSelected: false, isReserved: false },
{ id: 3, isSelected: false, isReserved: false },
{ id: 4, isSelected: false, isReserved: true },
{ id: 5, isSelected: false, isReserved: false },
{ id: 6, isSelected: false, isReserved: false },
];
const Seatbooking = () => {
const [isSelected, setIsSelected] = useState(0);
const [seating, setSeating] = useState(seats);
function onSelected(select: any) {
console.log(select.id);
console.log("selected ", select);
setIsSelected(select.id);
console.log("it is selected ", select.id);
}
const onReserved = (id: any) => {
setSeating((seat) => {
return seat.map((item) => {
return item.id === id
? { ...item, isReserved: !item.isReserved }
: item;
});
});
};
return (
<>
<div className="grid-container">
{seats.map((seat) => (
<div style={{ width: "50%" }}>
<button
key={seat.id}
style={{
backgroundColor:
seat.isReserved === true
? "grey"
: seat.id === isSelected
? "red"
: "#2d95c9",
}}
className="seat_buttons"
onClick={() => onSelected(seat)}
>
{seat.id}
</button>
</div>
))}
</div>
<button className="seat_booking" onClick={() => onReserved(isSelected)}>
Reserve seat
</button>
</>
);
};

Answer 1

具有固定命名和优化条件的工作解决方案。

import { useState } from 'react';
const seats = [
{ id: 1, isSelected: false, isReserved: false },
{ id: 2, isSelected: false, isReserved: false },
{ id: 3, isSelected: false, isReserved: false },
{ id: 4, isSelected: false, isReserved: true },
{ id: 5, isSelected: false, isReserved: false },
{ id: 6, isSelected: false, isReserved: false },
];
export const Seatbooking = () => {
const [selectedSeatId, setSelectedSeatId] = useState(0);
const [seating, setSeating] = useState(seats);
function onSelected(select) {
console.log(select.id);
console.log('selected ', select);
setSelectedSeatId(select.id);
console.log('it is selected ', select.id);
}
const onReserved = (id) => {
const updatedArr = seating.map((item) => {
return item.id === id ? { ...item, isReserved: !item.isReserved } : item;
});
setSeating(updatedArr);
};
return (
<>
<div className="grid-container">
{seating.map((seat) => (
<div key={seat.id} style={{ width: '50%', display: 'flex' }}>
<button
style={{
backgroundColor: seat.isReserved
? 'grey'
: seat.id === selectedSeatId
? 'red'
: '#2d95c9',
}}
className="seat_buttons"
onClick={() => onSelected(seat)}
>
{seat.id}
</button>
</div>
))}
</div>
<button className="seat_booking" onClick={() => onReserved(selectedSeatId)}>
Reserve seat
</button>
</>
);
};

1. 你应该在组件中使用state，而不是constant。
2. 你不需要回调setseats .
3. isSelected -布尔值的名称。您存储id -将其称为selectedSeatId。
4. 键应该在div上，而不是在button上。

Answer 2

seats.map((seat) => (

映射的是原始数组，而不是状态变量。改为:

seating.map((seat) => (