javascript 从 React.js 中的 json 文件中获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50291822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fetch Data from json file in React.js
提问by tibewww
I have a json file call data.json such as ( I use React.js):
我有一个 json 文件调用 data.json，例如（我使用 React.js）：
[{"id": 1,"title": "Child Bride"},
{"id": 2, "title": "Last Time I Committed Suicide, The"},
{"id": 3, "title": "Jerry Seinfeld: 'I'm Telling You for the Last Time'"},
{"id": 4, "title": "Youth Without Youth"},
{"id": 5, "title": "Happy Here and Now"},
{"id": 6, "title": "Wedding in Blood (Noces rouges, Les)"},
{"id": 7, "title": "Vampire in Venice (Nosferatu a Venezia) (Nosferatu in Venice)"},
{"id": 8, "title": "Monty Python's The Meaning of Life"},
{"id": 9, "title": "Awakening, The"},
{"id": 10, "title": "Trip, The"}]
Im my componentDidMount I have the below:
我是我的 componentDidMount 我有以下内容：
fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=>{
console.log(findresponse.title)
this.setState({
data:findresponse.title,
})
})
}
}
and in my render:
在我的渲染中：
<ul>
<li> {this.state.title}</li>;
</ul>
I would like to list all the title from my json file,
我想列出我的 json 文件中的所有标题，
Otherwise it says that .then((response) => response.json()) is an anonymous function . . .
否则它说 .then((response) => response.json()) 是一个匿名函数。. .
How to fix this ? I'm a bit confused
如何解决这个问题？我有点困惑
many thanks
非常感谢
采纳答案by Jared Smith
Your response isn't an object with a title property, it's an array of objects, all of which have title properties.
您的响应不是具有 title 属性的对象，而是一个对象数组，所有这些对象都具有 title 属性。
this.setState({ data: findresponse });
and then in your render
然后在你的渲染中
<ul>
{this.state.data.map((x, i) => <li key={i}>x.title</li>)}
</ul>
回答by Rilwan
You can use async/await. It requires fewer lines of code.
您可以使用异步/等待。它需要更少的代码行。
async getData(){
const res = await fetch('./data/data.json');
const data = await res.json();
return this.setState({data});
}
In the componentDidMount() call the function i.e.
在 componentDidMount() 调用函数即
componentDidMount(){
this.getData();
}
Finally, in your render, you map the array of data
最后，在渲染中，映射数据数组
render (){
return {<ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
)
}
回答by Boky
You get the array of objects, thus you need to store then whole object in your state and then from the state read all title properties.
您获得了对象数组，因此您需要将整个对象存储在您的状态中，然后从状态中读取所有标题属性。
Your fetch should look as follows:
您的提取应如下所示：
fetch('./data/data.json')
.then((response) => response.json())
.then((findresponse)=> {
this.setState({
data:findresponse
})
})
And then in your render you should have something as follows:
然后在你的渲染中你应该有如下内容：
render(){
return (
<ul>{this.state.data.map(item => <li>{item.title}</li>)} </ul>
)
}
That will give you all title properties from data object.
这将为您提供数据对象的所有标题属性。
