javascript - useState 和拼接反应
问题描述
我对 react 中的 useState 有一个大问题。
我只想使用 slice 从数组中删除一个对象,并使用 hooks 设置这个数组。
但它不起作用我不知道为什么..
看:
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>
谢谢 !
解决方案
您正在直接改变状态,这就是它不起作用的原因。使用不可变数组方法和函数形式setState
从数组中删除项目,例如filter
:
setImg(currentImg => currentImg.filter((img, i) => i !== index));
推荐阅读
- postman - 如何在 PostMan 中重命名环境?
- java - 基于列表创建动态模板化消息
- python - Python - 在包含 NaN 的列/列表上使用 if-else 进行列表理解
- javascript - 通过Javascript对象的递归循环
- javascript - 如果JS返回函数中不为空或null
- c++ - 通过引用返回迭代器
- javascript - Javascript - 将字符串转换为对象数组中的数字
- mysql - 为什么失败的 startupProbe 不会杀死 Pod 而是允许它运行?
- javascript - 为什么我的 if 语句没有响应我对变量所做的更改?
- reactjs - 使用 Docker npm run build 时出现错误