無法從我的數組中顯示我的 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 （圖像） 。

感謝那些試圖幫助並回復此帖子的人！