我想获取JSON数据,将其存储在状态中,然后通过props将其传递给组件。在组件中我想使用TypeError: this.props.dataQueries.map is not a function.
函数,但它显示了这个错误:
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataQueries: ''
}
}
fetchData() {
fetch('https://jsonplaceholder.typicode.com/posts', {method: "GET"}).
then(res => res.json()).
then(result => this.setState({ dataQueries: result }));
}
componentWillMount() {
this.fetchData();
}
render() {
return (
<div>
<ShowPosts dataQueries={ this.state.dataQueries } />
</div>
);
}
}
这是我的代码:
class ShowPosts extends Component {
render() {
return (
<div>
{
this.props.dataQueries.map((query, index) => {
return index;
})
}
</div>
);
}
}
这是我的组成部分:
{
name : 'John',
scores: [10, 12, 14, 16],
lastScore: 16
},
{
name : 'Mary',
scores: [78, 20, 14],
lastScore: 14
}
答案 0 :(得分:2)
最初,您将dataQueries
设置为''
。其中没有map
,因为它是一个字符串。当您的fetchData
异步调用完成时,它只是以后的数组。在异步调用完成之前,没有任何事情可以阻止render
被调用。
将其初始化为[]
,或修改render
以避免在数组不是数组时尝试将其用作数组。
答案 1 :(得分:0)
您应该在this.fetchData()
生命周期方法中调用componentDidMount()
。因此,当仅安装组件时,您将使用API的响应更新状态。此外,当有要使用条件渲染渲染的帖子时,您应该渲染ShowPosts
组件。
render() {
return (
<div>
{this.state.dataQueries.length && <ShowPosts dataQueries={ this.state.dataQueries } />}
</div>
);
}
你的初始dataQueries
应该是一个空数组。 dataQueries = []