javascript - useState 和 splice react

Question

这个问题已经有答案了:

Function render after splice and setState() (2 个回答)

已关闭 3 年前。

我在react中的useState有一个大问题..
我只想使用切片从数组中删除一个对象，并使用钩子(Hook) setState 这个数组。
但它不起作用我不知道为什么..

看:

  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));