我正在尝试从 Ajax 调用中解析一些 JSON，以使用 React 数据表组件将其显示为表格。我面临的问题是，当我尝试使用 set state 方法将数据放入状态变量时，我无法访问所需的数据。这是 JSON 的样子:
{
"Search": [
{
"Title": "Star Wars: Episode IV - A New Hope",
"Year": "1977",
"imdbID": "tt0076759",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BOTIyMDY2NGQtOGJjNi00OTk4LWFhMDgtYmE3M2NiYzM0YTVmXkEyXkFqcGdeQXVyNTU1NTcwOTk@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode V - The Empire Strikes Back",
"Year": "1980",
"imdbID": "tt0080684",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMjE2MzQwMTgxN15BMl5BanBnXkFtZTcwMDQzNjk2OQ@@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode VI - Return of the Jedi",
"Year": "1983",
"imdbID": "tt0086190",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMTQ0MzI1NjYwOF5BMl5BanBnXkFtZTgwODU3NDU2MTE@._V1._CR93,97,1209,1861_SX89_AL_.jpg_V1_SX300.jpg"
},
{
"Title": "Star Wars: The Force Awakens",
"Year": "2015",
"imdbID": "tt2488496",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode I - The Phantom Menace",
"Year": "1999",
"imdbID": "tt0120915",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMTQ4NjEwNDA2Nl5BMl5BanBnXkFtZTcwNDUyNDQzNw@@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode III - Revenge of the Sith",
"Year": "2005",
"imdbID": "tt0121766",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BNTc4MTc3NTQ5OF5BMl5BanBnXkFtZTcwOTg0NjI4NA@@._V1_SX300.jpg"
},
{
"Title": "Star Trek",
"Year": "2009",
"imdbID": "tt0796366",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMjE5NDQ5OTE4Ml5BMl5BanBnXkFtZTcwOTE3NDIzMw@@._V1_SX300.jpg"
},
{
"Title": "Star Wars: Episode II - Attack of the Clones",
"Year": "2002",
"imdbID": "tt0121765",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMTY5MjI5NTIwNl5BMl5BanBnXkFtZTYwMTM1Njg2._V1_SX300.jpg"
},
{
"Title": "Star Trek Into Darkness",
"Year": "2013",
"imdbID": "tt1408101",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMTk2NzczOTgxNF5BMl5BanBnXkFtZTcwODQ5ODczOQ@@._V1_SX300.jpg"
},
{
"Title": "Star Trek: First Contact",
"Year": "1996",
"imdbID": "tt0117731",
"Type": "movie",
"Poster": "http://ia.media-imdb.com/images/M/MV5BMTg4OTYwODY4MF5BMl5BanBnXkFtZTgwNTg2NjIyMDE@._V1_SX300.jpg"
}
],
"totalResults": "2846",
"Response": "True"
}
“data.Search”应该给我一个对象数组。这没有被发送到数据表组件。相反，如果我尝试以某种方式显示“data.totalResults”，它会起作用，因为它会抛出单个值。或者，如果通过局部变量发送相同的对象数组，它就可以工作。请帮助我，因为我是 React 的新手，这真的很花时间!提前感谢任何帮助!
<body>
<div id="container"></div>
<script type="text/babel">
var tableColumns = [
{ 'title': 'Title', 'prop': 'Title' },
{ 'title': 'Year', 'prop': 'Year' }
];
var destination = document.querySelector("#container");
var Buildrules = React.createClass({
getInitialState: function() {
return {data: {}};
},
loadData: function(){
$.ajax({
url: 'http://www.omdbapi.com/?s=star&r=json&plot=short',
success: function(data){
console.log(data);
this.setState({data: data});
console.log(this.state.data.Search);
}.bind(this)
})
},
componentWillMount: function(){
this.loadData();
},
componentDidMount:function(){
},
render:function(){
return (
React.createElement(ReactDataComponents.DataTable, {
keys: 'id',
columns: this.props.col,
initialData: this.state.data.Search, //Here, "data.Search" should give an array of objects but i am facing issue. If the same data is fed using a local variable, it works!
initialPageLength: 5,
initialSortBy: { prop: 'Title', order: 'descending'}
})
);
}
});
ReactDOM.render(
<div id="blah">
<Buildrules col = {tableColumns} />
</div>,
destination
);
</script>
</body>
最佳答案
这是您的解决方案:https://jsfiddle.net/lustoykov/fpfuuchj/1/
您错过了一些事情:
- 当您第一次记录结果时，它是
undefined因为您执行异步请求来获取数据。这就是为什么您需要检查它是否存在然后才渲染它的原因。 - 你也喜欢
console.log("this.state.data.Search"+ this.state.data.Search)。应该是:console.log("this.state.data.Search", this.state.data.Search) - 一旦数据存在，您就可以看到您的搜索结果
- (可选)请记住，Ajax 请求是在
componentDidMount中执行的正如 react's docu 中所建议的那样
如果您不想显示数据，而是将其传递给 DataTable 组件，而不是
const searches = this.state.data.Search ? this.state.data.Search.map((searchResult, index) => <h1 key={index}> {searchResult.Title} </h1>) : ""
只是有
const searches = this.state.data.Search ? this.state.data.Search.map(searchResult => <DataTable tableColumns={searchResult} />) : ""
这将显示您的 <DataTable />获取数据后的组件。
关于javascript - 无法在 React 组件中呈现 JSON 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39370431/