使用useState React Native将fetch数据传递给组件

Question

我是React Native的新手。事实上，这是我的第一个应用程序。

我一直在尝试将数据从Fetch传递到组件，但没有成功。我对谷歌进行了上下左右的研究，尝试了无数种东西，但仍然没有成功。

这是我的App.js

import React, {useState, useEffect} from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import Header from './parts/header';
// import BigNews from './parts/big-news';
import Index from './screens/index.js';
const authorization = { authorization: '1234aa' };
export default function App() {
const [fetchApiData, setApiData] = useState();
useEffect(() =>
fetch('https://example.com/get-app-home.php', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(authorization),
})
.then(res => res.json())
.then(res => {
this.setState({ setApiData: res })
})
.catch(() => this.setState({ hasErrors: true }))
);
return (
<View style={styles.viewport}>
<Header />
<ScrollView style={styles.contentHolder}>
<Index content={fetchApiData}/>
</ScrollView>
</View>
);

}

这是我的index.js文件

import React from 'react';
import { View, Text } from 'react-native';
import BigNews from '../parts/big-news';
import SmallNews from '../parts/small-news';
import Colors from '../constants/colors'
const Index = props => {
return (
<View>
<BigNews
image={props.content.first.image}
pretitle={props.content.first.pretitle}
title={props.content.first.title}
introduction={props.content.first.introduction}
style={{color: props.content.first.mark}}/>
<SmallNews
image={props.content.second.image}
pretitle={props.content.second.pretitle}
title={props.content.second.title}
style={{color: props.content.first.mark}}/>
<SmallNews
image={props.content.second.image}
pretitle={props.content.second.pretitle}
title={props.content.second.title}
style={{color: props.content.first.mark}}/>
<SmallNews
image={props.content.second.image}
pretitle={props.content.second.pretitle}
title={props.content.second.title}
style={{color: props.content.first.mark}}/>
</View>
);
}
export default Index;

我经常收到TypeError：undefined不是对象(正在评估"props.content.first"(

我尝试了无数种方法，但大多数时候这都是我看到的错误。如果我执行console.log状态，我会得到未定义或为空。

Answer 1

在Index组件中，content道具最初是未定义的，因为您没有向App组件中的useState函数传递任何值(通常称为"初始状态"(。

相反，请尝试：

const [ fetchApiData, setApiData ] = useState({
first: {},
second: {}
});

请注意，我已经用first和second项填充了初始状态，因为尝试访问树下的元素(image、pretitle等(仍然会引发错误。

Answer 2

您没有为类组件设置数据this.setState。将this.setState替换为setApiData()。

CCD_ 12返回初始状态和更新该值的函数。

const [ hasError, setHasErrors] = useState(false);
.then(res => res.json())
.then(res => {
setApiData(res)
})
.catch(() => setHasErrors(true))
);

正如George所指出的，初始状态设置为空，执行props.content.first.image将导致错误。将初始值设置为类似的对象

const [ fetchApiData, setApiData ] = useState({
first: {},
second: {}
});

或者验证组件中的值。

const Index = props => {
return (
<View>
<BigNews
image={props && props.content && props.content.first && props.content.first.image}
pretitle={props && props.content && props.content.pretitle && props.content.first.pretitle}
title={props && props.content && props.content.title && props.content.first.title}
introduction={props && props.content && props.content.introduction && props.content.first.introduction}
style={{color: props && props.content && props.content.first && props.content.first.mark}}/>
...
</View>
);
}
export default Index;