Question

undefined 不是对象（评估“data.map”）

2022-09-21

592

android react-native picker

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')

Answer 1

从代码片段中可以猜测，您在数据填充之前进行渲染。

我会尝试类似这样的操作；

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>
 );
};

上面的代码正在调用您的 API，一旦完成，它将 hasLoaded 状态设置为 true - 表示它已完成。

然后在返回中，您会注意到我根据该状态有条件地返回它。因此，在 API 调用完成之前不会呈现任何内容。

我还修改了您的数据映射以允许未定义的情况。

Answer 2

这样写，就可以了：

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

Alija Fajic

2022-09-21

Answer 3

您尚未初始化状态，我猜这就是问题所在。请执行以下操作：

const Sub_Map = () => {

const [isLoading, setLoading] = useState(false);
  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));
  };