使用状态和拼接反应

Question

我在 react. 中使用 useState 时遇到了一个大问题。
我只想使用切片从数组中删除一个对象，并使用钩子设置此数组。
但它不起作用我不知道为什么.

看：

const [ img, setImg ] = useState(allImages);
const removeImageAtIndex = (index) => {
img.splice(index, 1); // when i console.log i can see that the object has been removed
setImg(img);         // nothing changes
/* FOR TEST
setImg([]); // if I remove all img, it's working 
*/
/* I already tried this:
let temp = img;
img.splice(index, 1);
setImg(temp);
*/
/* SOLUTION
setImg([...img]);
*/
};
return (
<div>
{ variants.map((variant, index) => {
return <img key={index } onClick={ () => removeImageAtIndex(index)} src={img.src} />
})}
</div>

谢谢！

Answer 1

你直接改变了状态，这就是它不起作用的原因。使用不可变数组方法与setState的功能形式一起从数组中删除项目，例如带有filter：

setImg(currentImg => currentImg.filter((img, i) => i !== index));