为什么我无法发送Ajax请求??

monsterzzz
  • 131
   var App = React.createClass({
        render : function () {
            return (
                    <div className="col-sm-8 col-sm-offset-2" style={{marginTop:"50px"}}>
                        <Head1 />
                        <table className="table">
                            <Head2 />
                            <Body />
                        </table>
                    </div>
            )
        }
    })
    var Head1 = React.createClass({
        render : function () {
            return (
                        <p className="text-center">Leaderboard</p>
            )
        }
    })
    var Head2 = React.createClass({
        render : function () {
            return (
                    <thead style={{backgroundColr:"#FFFFFF"}}>
                    <tr>
                        <th>#</th>
                        <th>Camper Name</th>
                        <th>Points in past 30 days</th>
                        <th>All time points </th>
                    </tr>
                    </thead>
            )
        }
    })
    var Body = React.createClass({
        getInitialState : function () {
          return {
              value : ["!"]
          }
        },
        getData : function () {
          $.get("http://fcctop100.herokuapp.com/api/fccusers/top/recent",function (msg) {
             // console.log("!!!!!!!!!")
              console.log(msg)
          })
        },
        componentDidMount : function () {

            this.setState({
                value : this.getData
            })

        },
        render : function () {
            console.log(this.state.value)
            return (
                    <tbody>
                    <tr>
                        <th>1</th>
                        <th>dasdas</th>
                        <th>45</th>
                        <th>454</th>
                    </tr>
                    </tbody>
            )
        }
    })
    React.render(<App/>,document.getElementById("container"))

我在Body组件里面想使用Ajax请求获得数据并且渲染,但是现在连请求都不成功。。。
不知道是哪里出了问题。。

回复
阅读 3.3k
2 个回答

getData是个异步的方法,你这么写只是给把这个方法给value赋值了,并没有执行
应该在componentDidMount里触发getData,然后在getData的异步请求的回调里setState

请求ajax是异步的操作,你一上来在组件加载完毕后,才去执行componentDidMount的方法,你这种写法数据还没有请求回来你就去执行setState当然是什么耶没有啊。

只能在你的回调函数中请求数据回来后在去this.setState

componentDidMount(){
    getData().then( data => {
        this.setState({ //这个里面写你要对数据的处理})
    }).catch( err => {})
}

用的是es6的写法。大概意思就是这样的

宣传栏