undefined 不是一个对象（评估 \'data.map\'）答案

【问题标题】：undefined is not an object (evaluating 'data.map')undefined 不是一个对象（评估 \'data.map\'）
【发布时间】：2022-09-22 20:50:47
【问题描述】：

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

在“data.map”上有错误，请为我解释

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

请帮助我，我仍然是关于反应原生 TypeError 的新手： undefined 不是对象（评估 \'data.map\'）

标签： android react-native picker

【解决方案1】：

从代码 sn-p 的最佳猜测是您在填充数据之前进行渲染。

我会尝试这样的事情；

  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 调用完成之前什么都不会渲染。

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

【讨论】：

【解决方案2】：

像这样写，它会工作：

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

【讨论】：

【解决方案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));
  };

【讨论】：

【解决方案4】：

For the above results like this, displaying loading , how to complete ?

const Sub_Map = () => { 
const [hasLoaded, setHasLoaded] = useState(false);
const [data, setdata] = useState();

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

const getData = () => {
    fetch('http://. . . . /aplikasi/restapi.php?op=getJenis')
      .then(response => response.json())
      .then(json => {
        // console.log(json);
        setdata(json);
        // console.log(data);
      });
  };

又这样返回，哪里错了？

return (
    <View style={styles.container}>
      <Text style={styles.text}>Pilih Data</Text>
      <View style={styles.picker}>
        {hasLoaded ? (
          <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>
      );
    };

【讨论】：