无法在反应组件中呈现 JSON 数据
Posted
技术标签:
【中文标题】无法在反应组件中呈现 JSON 数据【英文标题】：Unable to render JSON data in react component 【发布时间】：2017-01-15 04:13:26 【问题描述】：我正在尝试从 Ajax 调用中解析一些 JSON，以使用 react datatable 组件将其显示为表格。我面临的问题是，当我尝试使用 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>
【问题讨论】：
【参考方案1】：这是您的解决方案：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 /> 组件。
【讨论】：
感谢 Leo.. 我添加了 JSON.parse。但问题仍然存在。它说“ Uncaught SyntaxError: Unexpected token o in JSON at position 1” 你能创建一个 jsfiddle 让我看看吗？ 嗨，里奥。我刚刚创建了一个简单的小提琴来访问渲染方法中的对象数组。 jsfiddle.net/69z2wepo/55546 。注意该方法中控制台日志的输出。它总是给出未定义的。 嗨 chakri，请查看我的更新答案，并感谢您为创建 jsfiddle 所做的努力 - 它对我理解您的问题有很大帮助。 我的想法是不要像在渲染方法中那样显示数组。相反，我需要将它作为输入传递给数据表。可以在此链接jsbin.com/ziyawu/9/edit?js,output 中找到类似的示例。但在这里，我会通过 AJAX 调用传递数据。希望我对我的问题有所了解。 :)以上是关于无法在反应组件中呈现 JSON 数据的主要内容，如果未能解决你的问题，请参考以下文章
无法将数据从子功能组件传递到反应父组件（React.js）[重复]