react native for inside map not loop-CodePudding

I have the code below, it dosen't increment I variable and the loop return always the same value of array. it seams not possible to put a FOR inside a MAP i have try replacing MAP with another FOR but i get other errors. How can i make it work? thanks

    {trackingData.length > 0 ? (
              trackingData.map((entry) => {
                let latLongArr = entry.geodata;

                for(let i = 0; i < latLongArr.length - 1; i  ) {
                  //console.log(latLongArr[i].latitude);
                  // for each segment of two points
                  let polylinePlanCoordinates = [];


                    polylinePlanCoordinates.push({
                      latitude: parseFloat(latLongArr[i].latitude),
                      longitude: parseFloat(latLongArr[i].longitude),
                    });
                    polylinePlanCoordinates.push({
                      latitude: parseFloat(latLongArr[i   1].latitude),
                      longitude: parseFloat(latLongArr[i   1].longitude),
                    });

//console.log(polylinePlanCoordinates);
                    return (
                      <MapView.Polyline
                        key={'poly-'   entry.segment.toString()   '-'   i}
                        coordinates={polylinePlanCoordinates}
                        strokeColor={entry.color}
                        strokeWidth={3}
                      />
                    );
                }
              })
            ) : (
              <View />
            )}

CodePudding user response：

The problem is that when you call return, it immediately terminates that loop of the map(). So only the first iteration of each of your for loops will run.

You should add every new Polyline you create to an array and then return that once your for loop is done

{
  trackingData.length > 0 ? (
    trackingData.map((entry) => {
      let latLongArr = entry.geodata;

      let polyLines = []

      for (let i = 0; i < latLongArr.length - 1; i  ) {
        //console.log(latLongArr[i].latitude);
        // for each segment of two points
        let polylinePlanCoordinates = [];

        polylinePlanCoordinates.push({
          latitude: parseFloat(latLongArr[i].latitude),
          longitude: parseFloat(latLongArr[i].longitude),
        });
        polylinePlanCoordinates.push({
          latitude: parseFloat(latLongArr[i   1].latitude),
          longitude: parseFloat(latLongArr[i   1].longitude),
        });

        // You add it to an array instead
        polyLines.push(
          <MapView.Polyline
            key={"poly-"   entry.segment.toString()   "-"   i}
            coordinates={polylinePlanCoordinates}
            strokeColor={entry.color}
            strokeWidth={3}
          />
        );
      }
      // When your for loop finishes you return the array
      return polylines
    })
  ) : (
    <View />
  );
}

Note, haven't checked that it is runnable, but with a couple tweaks it should work.