我正在显示不同的汽车和一个按钮,用于添加或删除用户所做的选择。如何让按钮单独更改状态?到目前为止,它将所有按钮的状态更改为一个值。
const cars = [
{ name: "Benz", selected: false },
{ name: "Jeep", selected: false },
{ name: "BMW", selected: false }
];
export default function App() {
const isJeepSelected = true;
const isBenzSelected = true;
return (
<div className="App">
{cars.map((values, index) => (
<div key={index}>
<Item
isBenzSelected={isBenzSelected}
isJeepSelected={isJeepSelected}
{...values}
/>
</div>
))}
</div>
);
}
const Item = ({ name, isBenzSelected, isJeepSelected }) => {
const [toggle, setToggle] = useState(false);
const handleChange = () => {
setToggle(!toggle);
};
if (isBenzSelected) {
cars.find((val) => val.name === "Benz").selected = true;
}
console.log("cars --> ", cars);
console.log("isBenzSelected ", isBenzSelected);
console.log("isJeepSelected ", isJeepSelected);
return (
<>
<span>{name}</span>
<span>
<button onClick={handleChange}>
{!toggle && !isBenzSelected ? "Add" : "Remove"}
</button>
</span>
</>
);
};
我使用Code Sandbox创建了一个工作示例。有人能帮帮忙吗?
1条答案
按热度按时间0sgqnhkj1#
这里有太多的硬编码。如果你有300辆车呢?您必须编写300个布尔
useState
钩子调用,如果您有一个任意的API有效负载(通常情况下),它仍然不是动态的。尝试考虑如何泛化您的逻辑,而不是像
"Benz"
和Jeep
那样对值进行硬编码。这些概念与任意的数据内容联系得太紧密了。cars
看起来应该是状态,因为你是从React中变异出来的。以下是另一种方法:
考虑为元素生成唯一ID,而不是使用索引或假定名称是唯一的。
crypto.randomUUID()
是实现这一点的一种便捷方法。