无法从我的数组中显示我的 JSX 中的图像。map 在我的反应应用程序中，即使。map 循环通过数组的所有索引

Question

问题：为什么不响应在 JSX 中显示我的图像？ 我怎样才能让它显示图像s ？

编辑：我怀疑的问题不是我获取数据的方式，而是我尝试显示/渲染图像的方式，我在下面的主要问题下标记了它。

我有一个具有 useEffect 的功能组件，可以从 firebase 获取 JSON object。

useEffect(()=>{
        axios
        .get("http://localhost:9998/api/v1/fault/" + lastURLSegment)
        .then((response) => {
            setDisplay(response.data)
        })
    },[])

Then I extract the imageURL value and query firebase to return me a url viewable on the web eg https://firebasestorage.googleapis.com/v0/b/${results.bucket}/o/${encodeURIComponent(item)}? alt=媒体

一旦我能够获得图像的 URL，我将 setState 放入一个名为 objUrl 的数组中

编辑：有 objOfUrl 和 objUrl，objOfUrl 是一个 var []，objOfUrl 是一个 state

useEffect(()=>{
        // displayspecificCases.imgURL = "fault/asd.jpg" 
        let foo = displayspecificCases.imageurl // "fault/asdfsdf.jpg,fault/1234.jpg..."
        if (foo !== undefined){
            console.log(foo) //console logs 2 images in string saperated by comma
            let bar = foo.split(','); // bar is now an array ['fault/asdfsdf.jpg','fault/1234.jpg']
            let i = 0;
            bar.map((item)=>{
                console.log(item)
                if(item !== ""){
                    firebase.storage().ref()
                    .child(item) 
                    .getMetadata()
                    .then((results) => {
                        objOfUrl[i] = `https://firebasestorage.googleapis.com/v0/b/${results.bucket}/o/${encodeURIComponent(item)}?alt=media`
                        i++ // i ++ for objOfUrl
                        console.log("i is :" + i)
                        try{setObjUrl(objOfUrl)}catch(e){console.log("err is in view useEffect try catch e : " + e)}
                    })
                    .catch((err) => {
                    console.log(err);
                    });
                    console.log(objOfUrl); //console logs [0: "url.....", 1: "url....."]
                }
            })
        }

    },[displayspecificCases])

主要问题在这里！ 所以我想在 JSX 中显示图像。 所以我将数组设置为 state 并尝试使用.map 返回数组中的每个项目，这样我就可以使用 img 标签来显示它们

// inside the JSX
{objUrl.map((item, i) => { console.log(i); return <div class="column"> <img key={i} width="360px" height="270px" src={item} alt="no photo"/> </div>})}

但现在的问题是只显示 1 张图像而不是整个数组。 此外，无论何时渲染，它似乎都会随机显示数组内的一个图像。 如何显示数组内的所有图像？ 非常感谢！

旁注：我知道我的代码很乱，我还在学习，请就如何改进某些部分提供建议和提示！

Answer 1

如果我正确理解您的代码，它正在执行以下操作：

1. displayspecificCases更新触发的效果回调
2. 将displayspecificCases.imageurl拆分为 url 数组
3. 为图像所在的桶调用 firebase 后端以获得真实图像 URL

问题

1. 你正在改变你的objOfUrl state object。

    objOfUrl[i] = `https://firebasestorage.googleapis.com/v0/b/${results.bucket}/o/${encodeURIComponent(item)}?alt=media`

2. 您将标准 state 更新排入队列。 这将使用上一个渲染周期中的 state 值将所有 state 更新排入队列（请记住 state 是const ）。 这也是一个问题，因为objOfUrl是state 参考。 它应该是一个新的数组引用。

    setObjUrl(objOfUrl)

3. 我想这不是您的问题的原因，但是使用array.prototype.map发出数组副作用是不正确的。

解决方案

使用功能 state 更新到

1. 在循环中正确地将 state 更新排入队列
2. 正确返回新的 state 数组引用

代码

useEffect(() => {
  if (displayspecificCases.imageurl) {
    displayspecificCases.imageurl.split(",").forEach((item, i) => {
      console.log(item);
      if (item !== "") {
        firebase
          .storage()
          .ref()
          .child(item)
          .getMetadata()
          .then((results) => {
            // Construct complete image URL
            const url = `https://firebasestorage.googleapis.com/v0/b/${
              results.bucket
            }/o/${encodeURIComponent(item)}?alt=media`;

            console.log("i is :" + i);
            try {
              // Update state array at index i
              setObjUrl((objOfUrl) =>
                objOfUrl.map((objUrl, index) => (index === i ? url : objUrl))
              );
            } catch (e) {
              console.log("err is in view useEffect try catch e : " + e);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    });
  }
}, [displayspecificCases]);

// Log state when it updates
useEffect(() => {
  console.log(objOfUrl); //console logs [0: "url.....", 1: "url....."]
}, [objOfUrl]);

Answer 2

解决了

解决方案解释如下

 useEffect(()=>{ axios.get("http://localhost:9998/api/v1/fault/" + lastURLSegment).then(async (response) => { setDisplay(response.data) const imagesToConstruct = await response.data.imageurl.slice(0,-1).split(",") // console.log(imagesToConstruct) imagesToConstruct.length > 0 && imagesToConstruct.forEach((item, i) => { if (item.== "") { firebase.storage().ref().child(item).getMetadata().then((results) => { //main solution here setImages((prevImages) => [..,prevImages: `https.//firebasestorage.googleapis.com/v0/b/${results?bucket}/o/${encodeURIComponent(item)}.alt=media`]) }).catch((err) => { console;log(err); }), } }) }) }, [])

问题

Every time useEffect is called, the constructed url is parsed into a temp array (objOfUrl) which is setState into objUrl by using setobjUrl(objOfUrl) However, for some reason, i cannot figure out why it overwrites the state and the state only ends up带有一个构造的 URL。 所以我不得不咨询某人来帮助我编写代码，这就是他提供的解决方案。

该解决方案解释了将 2 useEffect 压缩为 1，然后使用扩展运算符设置新的 state （图像） 。

感谢那些试图帮助并回复此帖子的人！