Question

我最近开始学习读物,我希望使用<代码>useState。在图像被点击和从图像链接阵列中删除后,该网页没有出现问题。

我的法典

import data from  ./assets/data/images.json 
import { useState } from  react 

function App() {

  var defaultList = Object.values(data)
  const [image, removeImage] = useState(defaultList)
  
  const callback = (key) => {
    console.log("removed image: ", defaultList[key])
    delete defaultList[key]
    removeImage(defaultList)
  }

  return (
    <div className={styles.App}>
      
      <div className={styles.ImageExamples}>
        {
          image.map((v, k) => {
            return <a onClick={() => callback(k)}><img src={v}/></a>
          })
        }
      </div>
    </div>
  );
}

为测试这一点,您将需要<代码>images.json 。

{
    "0": "https://images.unsplash.com/photo-1696399744120-da551393c12f?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8Nnw0NjU0NzMxfHxlbnwwfHx8fHw%3D",
    "1": "https://images.unsplash.com/photo-1622532824228-e1dffce3f265?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxNjYzMjQwfHxlbnwwfHx8fHw%3D",
    "2": "https://images.unsplash.com/photo-1542652735873-fb2825bac6e2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8OXwxNjYzMjQwfHxlbnwwfHx8fHw%3D",
    "3": "https://images.unsplash.com/photo-1472656877636-35a4bb852385?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MjB8MTU4ODI1fHxlbnwwfHx8fHw%3D",
    "4": "https://images.unsplash.com/photo-1614364655846-cd8087a5b38b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NDh8MTU4ODI1fHxlbnwwfHx8fHw%3D"
}

当我对图像进行点击时,奥索尔显示,图像已从阵列中删除,然而,在图像被点击后,useState 。在我对法典作一些改动后,这些改动只是表明,它节省了下来,消除了这些变化,并再次予以节省。

Answer 1

See Updating Arrays in State documentation:

Arrays是 Java本的变幻灯,但当你储存到国家时,你应当将其视为不可变。同物体一样,当你想要更新储存在国家的阵列时,你需要创建新的一席(或提供现有版本),然后确定使用新阵列。

import { useState } from  react ;

const data = {
   0 :  https://images.unsplash.com/photo-1696399744120-da551393c12f?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8Nnw0NjU0NzMxfHxlbnwwfHx8fHw%3D ,
   1 :  https://images.unsplash.com/photo-1622532824228-e1dffce3f265?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8M3wxNjYzMjQwfHxlbnwwfHx8fHw%3D ,
   2 :  https://images.unsplash.com/photo-1542652735873-fb2825bac6e2?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8OXwxNjYzMjQwfHxlbnwwfHx8fHw%3D ,
   3 :  https://images.unsplash.com/photo-1472656877636-35a4bb852385?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MjB8MTU4ODI1fHxlbnwwfHx8fHw%3D ,
   4 :  https://images.unsplash.com/photo-1614364655846-cd8087a5b38b?w=600&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8NDh8MTU4ODI1fHxlbnwwfHx8fHw%3D ,
};

function App() {
  const [image, setImage] = useState(Object.values(data));

  const callback = (index: number) => {
    setImage((pre) => pre.filter((_, i) => i !== index));
  };

  return (
    <div>
      {image.map((v, index) => {
        return (
          <a onClick={() => callback(index)}>
            <img src={v} />
          </a>
        );
      })}
    </div>
  );
}

export default App;

stackblitz

友情链接