React map through an array of objects and arrays

Question

I have something as follows:

const [channelAndReadsArray, setChannelAndReadsArray] = useState()

var channelAndReads = []
const requests = channels.map((currentChannel) => {
    axios.get(serverRestAddress...
                        .then((result) => {
        var element = {}
        element.channel = currentChannel;
        element.reads = result;
        channelAndReads.push(element);
    })
                    })

Promise.all(requests).then(() => {
    setChannelAndReadsArray(channelAndReads)
});

            ...

if (!channelAndReadsArray) {
    return null
})


channelAndReadsArray.map((channelAndReads) => {
    console.log(channelAndReads)
})

This is giving me null values in the console log. I am not sure what is wrong here

Please fix the code to make it a minimal reproducible example or at least valid syntax. — Andreas
– Andreas, Commented Oct 12, 2019 at 9:02
That is because, axios call is async. The loop would finish before even a single http call succeeds and so your console.log will not have anything. You need to wait until all the api is succeeded.There will be no value in channelAndRead coz nothing would be pushed by the time console.log executes. — Panther
– Panther, Commented Oct 12, 2019 at 9:06
@Panther "That is because, axios call is async..." - No, because TO "waits" for the results with Promise.all(requests). The problem is the missing return in .map() — Andreas
– Andreas, Commented Oct 12, 2019 at 9:45
If u think it waits then it waits, but i see there is no wait or the console getting invoked via a call back to see that it is waiting.. But if u say so.. yes then :-/ — Panther
– Panther, Commented Oct 12, 2019 at 9:57

Ori Drori · Accepted Answer · 2019-10-12 09:08:09Z

2

For Promise.all() to work, you need to return a promise from the channels.map. You can return each element, and then use the list in Promise.all to store them.

Example (not tested):

const [channelAndReadsArray, setChannelAndReadsArray] = useState()

const requests = channels.map((currentChannel) =>
  axios.get(serverRestAddress)
  .then((result) => ({
    channel: currentChannel,
    reads: result
  }))
)

Promise.all(requests).then((elements) => {
  setChannelAndReadsArray(elements)
});

if (!channelAndReadsArray) {
  return null
})


channelAndReadsArray.map(console.log)

answered Oct 12, 2019 at 9:08

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Dhananjai Pai · Accepted Answer · 2019-10-12 09:13:07Z

The request array would be empty since you are not returning anything from the .map, a cleaner approach without pushing into an array with async code may be

const [channelAndReadsArray, setChannelAndReadsArray] = useState();
const requests = channels.map(async (currentChannel) => {
           return axios.get(serverRestAddress...)
           .then((result) => {
                var element = {}
                element.channel= currentChannel;
                element.reads= result;
                return result;
             })
           });
Promise.all(requests).then((results) => { setChannelAndReadsArray(results)});

if (!channelAndReadsArray) {
     return null
});
channelAndReadsArray.map((channelAndReads)=>{
     console.log(channelAndReads)
});

Collectives™ on Stack Overflow

React map through an array of objects and arrays

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related