在本机反应中映射 state 数组

Question

I'm not sure what's going wrong. I am importing a function that uses useState and useEffect. the function returns the variable in my state with data from a fetch call. However, when I try to map over that data, I get an error: map is not defined. My syntax looks right and this works in regular react, so I'm not sure what's going wrong now. I am getting a response back, the file is being imported/exported correctly and the state is updating (the APIKey used is hidden for this post) and pointers would be great!

code for data and updating state:

export function grabLocationData() {
  const [data, updateData] = useState([]);
  console.log("Data!", data);
  const [location, updateLocation] = useState("");
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        console.log("lat", position.coords.latitude);
        console.log("lng", position.coords.longitude);
        const { latitude, longitude } = position.coords;
        updateLocation(`${latitude},${longitude}`);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
    const url = `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&location=${location}&radius=10000&key=${apiKey}`;
    console.log("console log!!!", url);
    fetch(url)
      .then((response, err) => {
        if (err) throw err;
        return response.json();
      })
      .then((responseJson) => {
        updateData(responseJson);
      });
  }, []);
  return data;
}

code for mapping

export default Locations = (props) => {
  const apiKey = "AIzaSyD3o3hDRwSZTVhlUIDOjGQ1ZqevG6fnWII";
  const data = grabLocationData();
  console.log(data);
  return (
    <ScrollView>
      {data.results.map((bank) => {
        return <View>{bank.name}</View>;
      })}
    </ScrollView>
  );
};

Answer 1

As @Will said in the comment, you can try to split your code into two differents effects. You will use the location state as deps for the second effect to be triggered.

export function grabLocationData() {
  const [data, updateData] = useState([]);
  const [location, updateLocation] = useState('');
  const [url, setUrl] = setState(
    `https://maps.googleapis.com/maps/api/place/textsearch/json?query=${query}&location=${location}&radius=10000&key=${apiKey}`
  );

  // Effect triggered after the location changes
  useEffect(() => {
    // Prevent the effect to be triggered on initial render, only location's update
    if (location !== []) {
      fetch(url)
        .then((response, err) => {
          if (err) throw err;
          return response.json();
        })
        .then((responseJson) => {
          updateData(responseJson);
        });
    }
  }, [location]);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const { latitude, longitude } = position.coords;
        updateLocation(`${latitude},${longitude}`);
      },
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
  });

  return data;
}

I added the url as a state but since i don't know where the variables query and apiKey come from, feel free to do whatever you want with this.