React Map function iterates through an array only once

Question

I have an image input tag which is multiple. I want each image to be scaled down. I use the map function for this. I call this within a useEffect function. But now it is the case that the map function is only run through once, no matter how many images are in an array. How can I change this ?

const articelImg = (e) => {
if (e.target.files && e.target.files.length > 0) {
  setFiles([...files, e.target.files]);
}
};

useEffect(() => {
files.length &&
  files.map(async (file, idx) => { //Two objects, but only interred once
    const thump = await thumpnail(file[idx]);
    setThumpnails([...thumpnails, thump]);
  });
}, [files]);

Bhavesh Daswani · Accepted Answer · 2022-07-25 15:21:18Z

1

when you are working with async/await code in a loop best approach is to use for of loop, below is the code you can give it a try

const articelImg = (e) => {
  if (e.target.files && e.target.files.length > 0) {
    setFiles([...files, e.target.files]);
  }
  };
  
  useEffect(() => {
    (async () => if (files.length) {
      for await (let file of files){
        const thump = await thumpnail(file[idx]);
        setThumpnails([...thumpnails, thump]);
      }
    })()
    
  }, [files]);

answered Jul 25, 2022 at 15:21

Bhavesh Daswani

7416 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Captai-N Over a year ago

Thx, but dosen't take effect

Bhavesh Daswani Over a year ago

are you getting any error, or facing issue related to this?

Ivan Shumilin · Accepted Answer · 2022-07-27 13:43:16Z

0

You have probably got a stale state in this line setThumpnails([...thumpnails, thump]); because of async settings. Try this one setThumpnails(thumpnails => [...thumpnails, thump]); this will provide you a latest snapshot of state or use refs as described in docs.

edited Jul 27, 2022 at 13:43

answered Jul 25, 2022 at 18:00

Ivan Shumilin

1,9433 gold badges15 silver badges20 bronze badges

Collectives™ on Stack Overflow

React Map function iterates through an array only once

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related