这段react为什么不会更新状态后改变?

monsterzzz
  • 131
   var App = React.createClass({
        getInitialState: function () {
          return {
              value : true
          }
        },
        upstate : function (value) {
            this.setState({
                value : value
            })
        },
        add : function () {
            if(this.state.value == true) {
                return "http://fcctop100.herokuapp.com/api/fccusers/top/recent"
            }else {
                return "http://fcctop100.herokuapp.com/api/fccusers/top/alltime"
            }
        },
        render : function () {
            console.log(this.add())
            return (
                    <div className="col-sm-10 col-sm-offset-1" style={{marginTop:"50px"}}>
                        <Head1 upstate={this.upstate} state = {this.state.value}/>
                        <table className="table">
                            <Body addr={this.add()}/>
                        </table>
                    </div>
            )
        }
    })
    var Head1 = React.createClass({
        handlerClick : function () {
         this.props.upstate(!this.props.state)
        },
        render : function () {
            return (
                        <p className="text-center" onClick={this.handlerClick}>Leaderboard</p>
            )
        }
    })
    var Body = React.createClass({
        getInitialState : function () {
          return {
              Array : []
          }
        },
        getData : function () {
            console.log(this.props.addr)
            var _this = this
          $.get(this.props.addr,function (msg) {
              _this.setState({
                  Array : msg
              })
          })
        },
        componentDidMount : function () {
            console.log("!!!!!1")
          this.getData()
        },
        allHanlderClick : function () {
            var newArray =   this.state.Array;
        for(var i=0;i<newArray.length-1;i++){
            for(var j=i+1;j<newArray.length;j++){
                if( newArray[i].alltime < newArray[j].alltime){
                    var temp = newArray[i]
                    newArray[i] = newArray[j]
                    newArray[j] = temp
                }
            }
        }
          this.setState({
              Array : newArray
          })
        },
        threeHandlerClick : function () {
            var newArray =   this.state.Array;
            for(var i=0;i<newArray.length-1;i++){
                for(var j=i+1;j<newArray.length;j++){
                    if( newArray[i].recent < newArray[j].recent){
                        var temp = newArray[i]
                        newArray[i] = newArray[j]
                        newArray[j] = temp
                    }
                }
            }
            this.setState({
                Array : newArray
            })
        },
        render : function () {
            var  i = 0 ;
            var Aa = (this.state.Array).map(function (msg) {
                i++
               return (
                       <tr>
                         <th>{i}</th>
                         <th className="text-left"><img src={msg.img} ></img>&nbsp;&nbsp;{msg.username}</th>
                         <th>{msg.recent}</th>
                         <th>{msg.alltime}</th>
                       </tr>)
            })
            return (
                    <div>
                        <thead style={{backgroundColr:"#FFFFFF"}}>
                        <tr>
                            <th>#</th>
                            <th>Camper Name</th>
                            <th>Points in past 30 days<button className="btn" onClick={this.threeHandlerClick}><span className="glyphicon glyphicon-chevron-down"></span></button></th>
                            <th>All time points <button className="btn" onClick={this.allHanlderClick}><span className="glyphicon glyphicon-chevron-down"></span></button></th>
                        </tr>
                        </thead>
                        <tbody>
                            {Aa}
                        </tbody>
                    </div>
            )
        }
    })
    React.render(<App/>,document.getElementById("container"))

我的想法是这样的,页面加载时,会去给默认的API发送ajax请求,然后我点击<Head1>的时候,再次发送ajax请求,然后页面应该会自己更新。但是我这么写哪里错了吗?没有达到我的目的。并且还想提问,到底子组件什么时候应该拥有自己的状态,一个页面到底应该怎么分组件呢?

回复
阅读 2.8k
3 个回答

一个错误

 <table className="table">
    <Body addr={this.add()}/>  //这里不可以加括号,不然就执行了 addr={this.add} 这才是合理的向下传递
</table>

props的传递最好不要用关键字,容易混淆

其它的我再看,不好意思看错了 我正在看

 $.get(this.props.addr,function (msg) {   //改成在这里执行this.props.addr()
              _this.setState({
                  Array : msg
              })
          })

你只是在componentDidMount里面调用了ajax请求,再次点击的时候只是update,并不会再次触发componentDidMount了,所以没有请求。

先说,写的够乱。

不更新的原因是,因为你在Body只在componentDidMount 的时候获取了props 的数据,之后就会一直使用 state 的数据渲染,而不是和父组件保持同步。要响应父组件传递的数据,你应该还加上

componentWillRecieveProps() {
    this.getData()
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏