感谢大家花时间阅读并试图提供帮助。我正在我的应用程序中构建一个新的屏幕,我正在react native中构建。在新屏幕中,我调用了一个我在PHP中构建的API,当在Postman中测试该API时,它工作正常并返回下面的JSON:
{
"status": "200",
"message": "success",
"data": [
{
"driverName": "Max Verstappen",
"driverPoints": {
"0": "281"
},
"driverPosition": {
"0": "1"
}
},
{
"driverName": "Sergio Pérez",
"driverPoints": {
"0": "171"
},
"driverPosition": {
"0": "2"
}
},
{
"driverName": "Fernando Alonso",
"driverPoints": {
"0": "139"
},
"driverPosition": {
"0": "3"
}
}
]
}
字符串
但是当我尝试使用axios在屏幕中调用它时,如果我控制响应,我会得到json值,但是当我尝试用数据填充特定数组时,我一直得到下面的错误。请我需要你的帮助来解决这个问题,这是真的令人沮丧,它已经一整天,我试图解决这个问题和调试。
错误:类型错误:无法读取未定义的属性“driverName”
即使当我控制台打印response.data.data时,我得到了这个:
response: Array [
Object {
"driverName": "Max Verstappen",
"driverPoints": Object {
"0": "281",
},
"driverPosition": Object {
"0": "1",
},
},
Object {
"driverName": "Sergio Pérez",
"driverPoints": Object {
"0": "171",
},
"driverPosition": Object {
"0": "2",
},
}
]
型
下面是我的屏幕代码:
export default function StandingsScreen() {
const theme = useContext(themeContext);
const [driverStandingsList, setDriverStandingsList] = useState([]);
const [constructorStandingsList, setConstructorStandingsList] = useState(
[]
);
const [driversTable, setDriversTable] = useState([]);
const [constructorsTable, setConstructorsTable] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [darkModeOn, setDarkModeOn] = useState(false);
const retrieveDarkMode = async () => {
try {
const jsonValue = await AsyncStorage.getItem('darkModeOn');
if (jsonValue !== null) {
const parsedValue = JSON.parse(jsonValue);
setDarkModeOn(parsedValue);
}
} catch (e) {
// error reading value
console.log('error: ', e);
}
};
const loadDriversStandings = () => {
setIsLoading(true);
const url =
baseApiUrl + '/standings/driver-standings-get.php?' + apikey;
axios
.get(url)
.then((response) => {
//console.log('response: ', response.data.data[0].driverName);
setDriverStandingsList(response.data.data);
console.log('driverStandingsList: ', driverStandingsList);
setIsLoading(false);
})
.catch((error) => console.log(error));
};
const renderLoader = () => {
return isLoading ? (
<View style={styles.loaderStyle}>
<ActivityIndicator size="large" color="#aaa" />
</View>
) : null;
};
// this useEffect execute the function only once
useEffect(() => {
loadDriversStandings();
}, []);
useFocusEffect(
React.useCallback(() => {
retrieveDarkMode();
return () => {};
}, [])
);
const styles = StyleSheet.create({
loaderStyle: {
marginVertical: 16,
alignItems: 'center',
},
buttonContainer: {
marginTop: 5,
marginBottom: 20,
padding: 0,
flexDirection: 'row',
},
button: {
width: '50%',
marginRight: 0,
},
screen: {
flex: 1,
padding: 10,
backgroundColor: theme.backgroundColor,
},
tableTitles: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
});
return (
<View style={styles.screen}>
<View style={styles.buttonContainer}>
<View style={styles.button}>
<Button
title="Drivers"
onPress={() => {
setDriversTable(true);
}}
/>
</View>
<View style={styles.button}>
<Button
title="Constructors"
onPress={() => {
setConstructorsTable(true);
}}
/>
</View>
</View>
<View style={styles.tableTitles}>
{isLoading ? (
<View style={styles.loaderStyle}>
<ActivityIndicator size="large" color="#aaa" />
</View>
) : (
<FlatList
data={driverStandingsList}
keyExtractor={(i, index) => String(index)}
renderItem={({ driver }) => (
<StandingTable
rankNumber={driver?.driverName}
driverName={driver}
points={driver}
/>
//console.log('driver: ', driver);
)}
ListFooterComponent={renderLoader}
/>
)}
</View>
</View>
);
}
型
1条答案
按热度按时间rsl1atfo1#
我通过将renderItem更改为以下内容来解决它:
字符串