react.js - 这段react为什么不会更新状态后改变？
本文介绍了react.js - 这段react为什么不会更新状态后改变？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
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> {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请求，然后页面应该会自己更新。但是我这么写哪里错了吗？没有达到我的目的。并且还想提问，到底子组件什么时候应该拥有自己的状态，一个页面到底应该怎么分组件呢？
解决方案
一个错误
<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
})
})这篇关于react.js - 这段react为什么不会更新状态后改变？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
