Question

我正在尝试从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>

Answer 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)
数据出现后，您可以看到搜索结果
（可选）请注意，componentDidMount

const searches = this.state.data.Search ? this.state.data.Search.map((searchResult, index) => <h1 key={index}> {searchResult.Title} </h1>) : ""

如果您不想显示数据，而是将其传递给DataTable组件，而不是

const searches = this.state.data.Search ? this.state.data.Search.map(searchResult => <DataTable tableColumns={searchResult} />) : ""

只需

<DataTable />

一旦获取数据，这将显示您的$sender = \App\User::where('username','=',$username)->firstOrFail(); $receiver = Auth::user(); $messages = \App\Message::Where(function($query) { $query->where("sender",$sender->id) ->where("receiver",$receiver->id); }) ->orWhere(function($query) { $query->Where("sender",$receiver->id) ->Where("receiver",$sender->id); }) ->get();组件。

无法在react组件中呈现JSON数据

1 个答案: