复选框在React状态下不能正常工作

Question

我正在建立一个表格，其中酒店业主将添加一个酒店，并选择同一酒店的一些设施。问题是，如果我在onChange函数中使用state，则不显示复选框。我不知道我哪里出错了?

import React from "react";
import { nanoid } from "nanoid";
const ListAmenities = ({
amenities,
className,
setHotelAmenities,
hotelAmenities,
}) => {
const handleChange = (e) => {
const inputValue = e.target.dataset.amenitieName;
if (hotelAmenities.includes(inputValue) === true) {
const updatedAmenities = hotelAmenities.filter(
(amenitie) => amenitie !== inputValue
);
setHotelAmenities(updatedAmenities);
} else {
//If I remove this second setState then everything works perfectly.
setHotelAmenities((prevAmenities) => {
return [...prevAmenities, inputValue];
});
}
};
return amenities.map((item) => {
return (
<div className={className} key={nanoid()}>
<input
onChange={handleChange}
className="mr-2"
type="checkbox"
name={item}
id={item}
data-amenitie-name={item}
/>
<label htmlFor={item}>{item}</label>
</div>
);
});
};
export default ListAmenities;

Answer 1

问题是您使用的是key={nanoid()}。相反，使用key={item]应该可以解决您的问题。

我相信你的应用程序使用ListAmenities是这样的:

const App = () => {
const [hotelAmenities, setHotelAmenities] = useState([]);
return (
<ListAmenities
amenities={["A", "B", "C"]}
className="test"
setHotelAmenities={setHotelAmenities}
hotelAmenities={hotelAmenities}
/>
);
};

在你目前的实现中，当handleChange调用setHotelAmenities时，它改变了hotelAmenities，这是ListAmenities的一个道具，并导致ListAmenities渲染。由于您使用的是key={nanoid()}, react假定添加了新项，删除了旧项。所以它会重新呈现复选框。由于复选框没有默认值，因此在重新呈现时假定它处于未选中状态。