Question

大家。我已经在一个数组中得到了数据，并且据我所知它存储得很好（从数组中调用时会显示在控制台上）。但它没有显示为输出。我完全迷失在这一点上。代码如下，您也可以在Codepen here中看到我的工作。如果有人能指出我做错了什么，我会非常感激。

这是HTML5：

<div id="content" >
</div>

这是reactjs：

var CommentBox = React.createClass({  
    render:function(){
    return(
      <div >
    <h1>Here is the data</h1>
    <AllData />
    </div>
    );
  }
});

var AllData = React.createClass({
  render: function(){
     var theList = [];
      $.getJSON( 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
        function(data) {
         theList = data;
         var steencamp
          for(var i=0; i<10; i++){       
            steencamp = theList[i]
            console.log(steencamp)
            return (
              <div><p>{steencamp}</p></div>
            );
        }
    })
  }            
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Answer 1

您不应该在渲染功能中执行ajax请求。渲染应该仅用于显示数据。

var AllData = React.createClass({
    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
    getInitialState: function() {
        return {data: []}
    },
    componentDidMount: function(){
        $.getJSON(this.dataUrl, this.handleData)
    },
    handleData: function(data){
        this.setState({data: data});
    },
    render: function(){
        var elems = [];
        for(var i=0; i<this.state.data.length; i++){
            elems.push(<div><p>{this.state.data[i]}</p></div>);
        }

        return <div>{elems}</div>;
    }
});

Answer 2

以下是工作代码：

var CommentBox = React.createClass({  
    render:function(){
    return(
      <div >
    <h1>Here is the data</h1>
    <AllData />
    </div>
    );
  }
});

var AllData = React.createClass({

    dataUrl: 'https://fcctop100.herokuapp.com/api/fccusers/top/recent',
    getInitialState: function() { 
        return {data: []}
    },

    componentDidMount: function(){
        $.getJSON(this.dataUrl, this.handleData)
    },
    handleData: function(data){
        this.setState({data: data});
    },
    render: function(){
        var elems = [];
        for(var i=0; i<this.state.data.length; i++){
            elems.push(<div><p>{this.state.data[i].username}</p></div>); 
        }
        return (<div>{elems}</div>);
    }

});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')

）;

污垢简单的reactjs程序 - 为什么数据不显示？

2 个答案: