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

Question

The question : why doesn't react display my image s in the JSX? How can I get it to display the image s ?

Edit: the issue I suspect is not with the way I get the data but rather the way I try to display/render the image, which I have labeled under main issue below.

I have a functional component that has a useEffect to GET a JSON object from firebase.

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=media

once I am able to get the URL for the image, I setState into an array called objUrl

edit: there is objOfUrl and objUrl, objOfUrl is a var [], objOfUrl is a 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])

Main issue is here! So I want to display the images in JSX. So I setState the array into a state and tried to use.map to return each item in the array so I can use img tag to display them

// 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>})}

But the problem right now is that only 1 image is displayed and not the whole array. Also whenever it renders, it seems to randomly display one of images inside the array. How do I display all images inside the array? many thanks!

sidenote: I know my code is messy, I'm still learning, please do give advice and tips on how to improve certain parts!

Answer 1

If I understand your code correctly it is doing:

1. Effect callback triggered by displayspecificCases updating
2. Split displayspecificCases.imageurl into array of urls
3. Call firebase backend for the bucket the image is in for the real image URL

Issues

1. You are mutating your objOfUrl state object.

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

2. You enqueue standard state updates in a loop. This enqueues all state updates using the state value from the previous render cycle (remember state is const ). This is also a problem since objOfUrl IS the state reference. It should be a new array reference.

    setObjUrl(objOfUrl)

3. I suppose this isn't a cause for your issue, but it is incorrect to use array.prototype.map to issue array side-effects.

Solution

Use a functional state update to

1. Correctly enqueue state updates in a loop
2. Correctly return a new state array reference

Code

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

Solved

solution explained below

 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); }), } }) }) }, [])

The issue

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 with one constructed URL. So i had to consult someone to help with my code and this was the solution he provided.

The solution explained Compressed the 2 useEffect into 1 and then set new state (images) using the spread operator.

Thank you to those who have attempted to help and replied to this post!