不可变地添加/删除状态数组项

Question

我已经设置了一些按钮，可以用函数(clickHandle(在数组中存储哪个按钮被点击或没有被点击。因此，我在className中设置了一个条件，这样，如果按钮被点击或不被点击，它应该更改className。然而，这似乎不起作用，我猜是因为className需要通过函数更新。

这是我的代码：

const [click, setClick] = useState([]);
const clickHandle = (id) => {
click.indexOf(id) === -1
? click.push(id)
: click.splice(click.indexOf(id), 1);
console.log(click);
}; 
return (
<div className="options-container">
{data &&
data.additionalCharges.map((data, index) => {
return (
<button
onClick={async () => clickHandle(data.id)}
className={
click.indexOf(data.id) === -1
? "options-unclicked"
: "options-clicked"
}
key={data.id}
>
<div>{data.title}</div>
<div>{data.description}</div>
<div>
{data.price.amount} € {data.price.unit}
</div>
</button>
);
})}
</div> 
)```

Answer 1

问题是您使用的是Array.prototype.push()和Array.prototype.splice()，它们都会在适当的位置更改您的状态，这不会让React检测到您所做的更改。

相反，您的状态操作方法应该是不可变的。所以，你的点击处理程序应该看起来像：

const clickHandle = (id) => {
click.includes(id)
?  setClick(click.filter(_id => _id !== id))
:  setClick([...click, id]) 
}

Answer 2

您尚未更新onClick侦听器clickHandle中的状态

应该是

const clickHandle = (id) => {
let newData = [...click];
newData.indexOf(id) === -1
? newData.push(id)
: newData.splice(newData.indexOf(id), 1);
setClick(newData);
}; 

这样，您的组件将在单击时重新渲染，类名将被反映出来。

Answer 3

这是因为您使用click变量添加和删除按钮，而应该使用setClick，这样您的组件就可以重新呈现

用以下替换您的点击处理程序

const clickHandle = (id) => {
let buttons = [...click]
buttons.indexOf(id) === -1
? buttons.push(id)
: buttons.splice(buttons.indexOf(id), 1);
console.log(buttons);
setClick(buttons) // this will render your component
};