const Sub_Map = () => {

const [isLoading, setLoading] = useState();
  const [data, setdata] = useState();

  useEffect(() => {
    getData();
  }, []);

  const getData = () => {
    fetch('http://. . . . /aplikasi/restapi.php?op=getJenis')
      .then(res => res.json())
      .then(json => setdata(json))
      .catch(error => alert(error))
      .finally(setLoading(false));
  };

on the "data.map" there is an error, please explain for me

  return (
    <View style={styles.container}>
      <Text style={styles.text}>Pilih Data</Text>
      <View style={styles.picker}>
        {isLoading ? (
          <ActivityIndicator />
        ) : (
          <Picker
            selectedValue={data}
            onValueChange={itemValue => setdata(itemValue)}>
            {data.map((item, key) => {
              <Picker.Item
                label={'${item.bencana}'}
                value={'${ item.id }'}
                key={key}
              />;
            })}
          </Picker>
        )}
      </View>
   );
};

please help me, i'm still newbie about react native TypeError: undefined is not an object (evaluating 'data.map')

CodePudding user response：

Write it like this, and it will work:

{data && data?.map((item, key) => { ...

CodePudding user response：

Best guess from the code snippet is that you are rendering before data is populated.

I would try something like this;

  const [hasLoaded, setHasLoaded] = useState(false);

  useEffect(() => {
    const callApi = async () => {
        await getData();
        setHasLoaded(true);
    };

    callApi();
}, []);

...

return hasLoaded ? (
<View style={styles.container}>
  <Text style={styles.text}>Pilih Data</Text>
  <View style={styles.picker}>
    {isLoading ? (
      <ActivityIndicator />
    ) : (
      <Picker
        selectedValue={data}
        onValueChange={itemValue => setdata(itemValue)}>
        {data && data?.map((item, key) => {
          <Picker.Item
            label={'${item.bencana}'}
            value={'${ item.id }'}
            key={key}
          />;
        })}
      </Picker>
    )}
  </View>
 );
};

What the above code is doing is calling your API and once it's done, it sets the hasLoaded state to true - indicating it is finished.

Then in the return, you notice I return it conditionally based on that state. So nothing will render until the API call is done.

I also amended your data mapping to allow for undefined cases.