[英]React Re-render on State Change
const Feed = React.createClass({
getInitialState: function () {
return {
data: {}
}
},
componentDidMount: function () {
axios.all([
getAllTeams(), getAllDrivers()
]).then((results) => {
let teams = results[0].data;
let drivers = results[1].data;
let newDrivers = normaliseDrivers(drivers);
var data = normaliseData(teams, newDrivers);
this.setState({
data: data
})
})
},
sortAndRenderPanels () {
let teamsArr = Object.values(this.state.data);
teamsArr.sort(function(a,b) {
return (a.positions[0][2016] > b.positions[0][2016])
? 1 : ((b.positions[0][2016] > a.positions[0][2016])
? -1 : 0);
});
return teamsArr.map ((data, i) => {
return (
<MyPanel
key={i}
data={data}
/>
)
})
},
sortAlphabeticallyAndRender () {
let teamsArr = Object.values(this.state.data);
var sorted = teamsArr.sort(function(a, b){
var textA = a.name.toUpperCase();
var textB = b.name.toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
return sorted.map((data, i) => {
return (
<MyPanel
key={i}
data={data}
/>
)
})
},
handleAlphabetClick (e) {
e.preventDefault();
this.sortAlphabeticallyAndRender(this.state);
this.forceUpdate(function () {
return this.state.data;
});
},
render: function () {
const cards = this.sortAndRenderPanels();
return (
<div id="feed">
<Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align">
<span > Sort Alphabetically</span>
</Button>
{cards}
</div>
)
}
});
按钮单击我想重新渲染面板,按字母顺序显示。 我知道我的功能正确地命令它们工作,并以正确的顺序记录到控制台,但我似乎无法强制更新重新呈现状态。
如果我没错,forceUpdate()方法将调用render()方法。
在渲染中,您正在调用:
const cards = this.sortAndRenderPanels();
然后用{cards}打印出来
我认为你需要在这个状态中移动卡片
在你的componentDidMount()回调中添加:
componentDidMount: function () {
let obj = this;
axios.all([
getAllTeams(), getAllDrivers()
]).then((results) => {
let teams = results[0].data;
let drivers = results[1].data;
let newDrivers = normaliseDrivers(drivers);
var data = normaliseData(teams, newDrivers);
this.setState({
data: data,
cards: obj.sortAndRenderPanels()
})
})
}
在你的点击处理程序中添加:
handleAlphabetClick (e) {
e.preventDefault();
this.setState({
cards: this.sortAlphabeticallyAndRender(this.state)
});
}
通常应该重新渲染。 如果没有添加:
componentDidUpdate: function() {
this.forceUpdate();
}
最后,您需要使用{this.state.cards}更改渲染{cards}
问候
而不是做力更新,总是在变化的state
变量,它会自动re-render
的ui
,当你正在sorting
的array
,更新state
与排序值array
,并写一个单独的方法来创建面板,你面板将自动更新,无需forceupdate
,试试这个:
const Feed = React.createClass({
getInitialState: function () {
return {
data: {},
}
},
componentDidMount: function () {
axios.all([
getAllTeams(), getAllDrivers()
]).then((results) => {
let teams = results[0].data;
let drivers = results[1].data;
let newDrivers = normaliseDrivers(drivers);
var data = normaliseData(teams, newDrivers);
var value = this.sortAndRenderPanels(data);
this.setState({ data: value})
})
},
sortAndRenderPanels: function (data) {
let teamsArr = Object.values(data);
teamsArr.sort(function(a,b) {
return (a.positions[0][2016] > b.positions[0][2016])
? 1 : ((b.positions[0][2016] > a.positions[0][2016])
? -1 : 0);
});
return teamsArr || [];
},
sortAlphabeticallyAndRender: function (data) {
let teamsArr = Object.values(data);
teamsArr.sort(function(a, b){
var textA = a.name.toUpperCase();
var textB = b.name.toUpperCase();
return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
return teamsArr;
},
handleAlphabetClick: function (e) {
e.preventDefault();
let data = this.sortAlphabeticallyAndRender(this.state.data);
this.setState({data:data});
},
createPanel: function (){
return this.state.data.map((data, i) => {
return (
<MyPanel
key={i}
data={data}
/>
)
})
}
render: function () {
return (
<div id="feed">
<Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align">
<span > Sort Alphabetically</span>
</Button>
{this.createPanel()}
</div>
)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.