我正在制作一個從 API 獲取資料并將其顯示在螢屏上的應用程式。渲染螢屏時會出現以下錯誤：渲染錯誤未定義不是物件（正在評估“this.text”）。有趣的是，除了節點模塊中的檔案之外，我的任何螢屏中都沒有像“this.text”這樣的東西。無論如何，這是檔案
呈現資料的螢屏：
/* the screen that renders the data */
import React, {useEffect, useState} from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar } from 'react-native';
const Experts = () => {
useEffect(()=> {
fetch('http://icantputtheactualurlcuzitsmyipaddress.com/expertsList/',{
method: 'GET'
})
.then(resp => resp.json)
.then(data => {
setData(data)
})
.catch(error => console.log('something is not suppose to be happening'))
}, [])
const [data, setData] = useState([]);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text style={styles.item}>{item.name}</Text>
)}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
item: {
backgroundColor: 'teal',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
color: 'white',
},
title: {
fontSize: 32,
},
});
export default Experts;我真的很感激任何輸入，我對此有點陌生。
uj5u.com熱心網友回復：
我認為您的資料陣列在 API 獲取之前第一次為空，并且 FlatList 中的文本嘗試獲取，因此通過“？”提供空值檢查。喜歡專案？.name
<SafeAreaView style={styles.container}>
<FlatList
data={data}
renderItem={({ item }) => (
<Text style={styles.item}>{item?.name}</Text>
)}
keyExtractor = (item, index) => item.id;
/>
</SafeAreaView>
);
并且不要忘記添加 keyExtractor
uj5u.com熱心網友回復：
所以經過一番研究，我發現這是因為在效果掛鉤中對 api 的呼叫是一個函式。你需要括號來表示函式。此外，它顯示 this.text 的原因是因為它在 json 決議器下。所以到你一直在等待的部分
代碼：
useEffect(()=> {
fetch('http://skrskr.com/api/experts/',{
method: 'GET'
})
/* make sure to put the needed parenthesis */
.then((resp) => resp.json())
.then(
(json) => setData(json)
)
.catch(error => console.log('something is not suppose to be happening'))
}, [])
const [data, setData] = useState([]); 我希望這能找到需要它的人
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/407049.html
標籤：