useState 和 splice 反应答案

【问题标题】：useState and splice react [duplicate]useState 和 splice 反应
【发布时间】：2023-03-23 07:45:01
【问题描述】：

我对 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>

谢谢！

【问题讨论】：

您是否对setImg([...img]) 感兴趣，制作一个您已经从中删除项目的数组的浅表副本？
哦，是的，它正在工作，你能解释一下为什么吗？？
因为 setImg 现在获得了不同的引用，它是您的数组的副本（实际上 setImg( img.slice() ) 也可以，只需验证副本

标签： javascript reactjs react-hooks

【解决方案1】：

您正在直接改变状态，这就是它不起作用的原因。使用不可变数组方法和 setState 的函数形式从数组中删除项目，例如 filter：

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

【讨论】：

filter和splice不一样。
过滤器是删除索引的最佳实践。对我来说它工作正常。谢谢