Error in searching collection points

Question

Last week I followed Next Level Week, which brought the idea of creating a system for Mobile and Web, the web part I was able to do, all according to the video. but I have a problem so far in the Mobile part exactly in the 4 video that should returns me the collection points already registered. but the error that returns is this [Unhandled promise rejection: TypeError: undefined is not a function (near '...points.map...')]

according to video, everything is the same, but even so returns me this error.

Below goes the code with everything related to the collection point

interface Point {
  id: number;
  name: string;
  image: string;
  latitude: number;
  longitude: number;
}



const [points, setPoints] = useState<Point[]>([])

  useEffect(() => {
    api.get('points', {
      params: {
        city: 'Mossoró',
        uf: 'RN',
        items: [3, 5, 6]
      }
    }).then(response => {
      setPoints(response.data)
      console.log(response.data)
    })
  }, [])

{points.map((point) => (
                <Marker
                  key={point.id}
                  style={styles.mapMarker}
                  onPress={handleNavigateToDetail}
                  coordinate={{
                    latitude: point.latitude,
                    longitude: point.longitude,
                  }}
                >
                  <View style={styles.mapMarkerContainer}>
                    <Image
                      style={styles.mapMarkerImage}
                      source={{
                        uri: point.image,
                      }}
                    />
                    <Text style={styles.mapMarkerTitle}>{point.name}</Text>
                  </View>
                </Marker>
              ))}

Answer 1

It seems your variable points is getting the value undefined and therefore cannot perform the function map. You own a console.log(response.data) in the function that searches the points on the map, check in the console what is being shown, it is likely that the received value is not valid.

Try to put a bar as a prefix in the address being passed the API so that the route accessed in your backend be the route of points (I am guessing here that api file has been built the same way as done in NLW event):

api.get('/points', {
  // Seu código
});

Answer 2

I had a similar mistake to this, in my case it was the json that the back-end was returning. I was expecting a: [ { "id": 12,..... },{},{}}] And the back-end returned: { "points": [ {},{},{} ]}

My solution was to replace this setpoints(Answer.data); therefore setpoints(Response.datapoints.);