useState 和 splice 反应

Question

我在反应中的 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));