Is there a way to setState of an array in a .then() block?

Question

`

I have an array of points (city, state)
I make a fetch call to convert my points to (lat and long) so I push the result to an array and tried to setState of the array but when I console.log(array) I got []. `

if (pointsComplete) {
        // for  (let i = 0; i < pointsComplete.length; i++) {
        for await (let x of pointsComplete) {
          if (x.city !== "") {
            fetch(
              `https://singlesearch.alk.com/na/api/search?&query=${x.city} , ${x.state}&maxResults=1`,
              {
                method: "GET",
                headers: {
                  "Content-Type": "application/json",
                  Authorization: trimble_key,
                },
              }
            )
              .then((response) => response.json())
              .then((data) => {
                pointsCoords.push({
                  Lat: data.Locations[0].Coords.Lat,
                  Long: data.Locations[0].Coords.Lon,
                  position: parseInt(x.position),
                });
              })
              .finally(() => {
                setPointsCoordsArray(pointsCoords);
              });
          }
        }
      }

You can't console log right after setting and expect to see the updated value. A state value is guarenteed to be consistent (barring user mutation) throughout a render cycle, your newly set state value will be available on the next render. But you're also calling `setState` inside a loop, which will have other side effects. — pilchard, Oct 14 '21 at 10:35
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — pilchard, Oct 14 '21 at 10:36
Also see: [Set useState hook in a async loop](https://stackoverflow.com/questions/59535890/set-usestate-hook-in-a-async-loop) — pilchard, Oct 14 '21 at 10:40

score 0 · Accepted Answer · answered Oct 19 '21 at 08:03

This worked for me ..

if (pointsComplete) {
        let promises = [];
        for (let x of pointsComplete) {
          if (x.city !== "") {
            promises.push(
              fetch(
                `https://singlesearch.alk.com/na/api/search?&query=${x.city} , ${x.state}&maxResults=1`,
                {
                  method: "GET",
                  headers: {
                    "Content-Type": "application/json",
                    Authorization: trimble_key,
                  },
                }
              )
                .then((response) => response.json())
                .then((data) => {
                  pointsCoords.push({
                    Lat: data.Locations[0].Coords.Lat,
                    Long: data.Locations[0].Coords.Lon,
                    position: parseInt(x.position),
                  });
                })
            );
          }
        }

        Promise.all(promises).then((data) => {
          setPointsCoordsArray(pointsCoords);
          console.log("______________");
       
        });
      }

Is there a way to setState of an array in a .then() block?

1 Answers1