React Native undefined 不是一个对象(评估 'data[0].given_amount')

Question

我有这个代码，当我打开这个屏幕时，我有错误未定义不是一个对象(评估'data[0].given_amount')，当我已经在那个屏幕上，它从api加载信息，但是当我打开那个屏幕时，我有这个渲染错误。

import React, { useEffect, useState } from 'react';
import {
View,
Text,

} from 'react-native';
import { styles } from './style';
import Colors from '../../constants/colors';
import { useTranslation } from 'react-i18next';
import * as api from '../../core/api';
import BackHeader from '../../components/backheader/backheader';

const Ethstaking = props => {
const { t } = useTranslation();
const [data, setData] = useState([]);


const stakingInfo = async () => {
let res = await api.stakingInfo();
console.log("ethstake------", res.data.data)
//console.log("ethstake------", res.data.data[0]['given_amount'])
setData(res.data.data);

}
useEffect(() => {
stakingInfo();

}, []);

return (

<View style={{ flex: 1, backgroundColor: Colors.white }}>
<BackHeader name={t('ethstake')} navigation={props.navigation} />

<View style={styles.Container}>

<View style={styles.card}>
<Text style={styles.row}>{t('givenamt')}:  {data[0].given_amount}</Text>
<Text style={styles.row}>{t('lastincome')}:  {data[0].yesterday_income}</Text>
<Text style={styles.row}>{t('totalincome')}:  {data[0].total_income}</Text>
<Text style={styles.row}>{t('totaleth')}:  {data[0].total_eth}</Text>

</View>
</View>
</View>
);

};

export default Ethstaking;

在控制台我有

ethstake------ [{"given_amount": "0.062000000", "total_eth": "0.062232910", "total_income": "0.000232910", "yesterday_income": "0.000004710"}]

Answer 1

我用

setData(res.data.data[0]);
<Text style={styles.row}>{t('givenamt')}:  {data.given_amount}</Text>
<Text style={styles.row}>{t('lastincome')}:  {data.yesterday_income}</Text>
<Text style={styles.row}>{t('totalincome')}:  {data.total_income}</Text>
<Text style={styles.row}>{t('totaleth')}:  {data.total_eth}</Text>