Question

我在useState中有一个大问题。.
我只想使用slice从数组中删除对象，并使用钩子对此数组进行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));

useState和拼接反应

1 个答案: