开发者问题收集

React Native‘ERROR TypeError：无法将未定义的值转换为对象’

2022-12-22
3304
javascript reactjs react-native react-hooks

我尝试以这种方式检索数据： 

useEffect(() => {
      async function fetchData() {
        const response = await fetch('https://hasanadiguzel.com.tr/api/kurgetir');
        const json = await response.json();
        setData(json);
      }
      fetchData();
    }, []);
console.log(data.TCMB_AnlikKurBilgileri[0].Isim);

当我在打开应用程序时运行 console.log(data.TCMB_AnlikKurBilgileri); 时，API 似乎运行正常，数据正在被检索。但是，当我尝试使用 console.log(data.TCMB_AnlikKurBilgileri[0].Isim); 检索 data.TCMB_AnlikKurBilgileri[0].Isim 时，我收到错误： ERROR TypeError：无法将未定义的值转换为对象 。 但是，当我在运行 console.log(data.TCMB_AnlikKurBilgileri); 后保存应用程序，然后运行 ​​ console.log(data.TCMB_AnlikKurBilgileri[0].Isim); 时，它可以正常工作并提供输出。

我该如何解决这个问题？注意：您可以观看视频以更好地了解我的问题 https://youtu.be/x_mlvMDzUt4

2个回答

您正在尝试在 useEffect 之外使用 console.log。这会导致问题，因为您的 api 尚未获取数据，但您正在尝试记录数据。

因此，将您的 console.log 移到 useEffect 内部以检查 api 响应是否正确。 

const json = await response.json();
console.log(json.TCMB_AnlikKurBilgileri[0].Isim);
setData(json);

首先，当您渲染组件时，如果您没有设置初始值，则数据没有任何值（因此可能未定义）。一旦 api 请求完成并更新响应状态，您的 UI 将使用正确的值更新。

ClusterH
2022-12-22

您正在尝试将一个对象分配给一个数组。 data 是数组，而 json 是对象。

不要使用空数组，而应使用 null 作为默认值： 

const [data, setData] = useState(null)

为了跟踪数据变化，您还应该添加单独的 useEffect 

useEffect(() => {
 console.log(data?.TCMB_AnlikKurBilgileri[0]?.Isim)
},[data])
kanelloc
2022-12-22