[英]Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component
I've been trying to invoke a method when a component loads, in order to sort data on the initial page load. 我一直在尝试在组件加载时调用方法,以便对初始页面加载的数据进行排序。
In the example below, I set my state to the initial data, then instantly call the sort() method to sort the data. 在下面的示例中,我将状态设置为初始数据,然后立即调用sort()方法对数据进行排序。
export default class Leaderboard extends React.Component {
constructor(){
super();
this.state = {
rows:
[{name: "Jonny", points: 124, total: 1234},
{name: "Bob", points: 321, total: 4321},
{name: "Sally", points: 234, total: 31234},
{name: "Katie", points: 613, total: 12333},
{name: "Cameron", points: 1232, total: 5231}]
};
this.sort("daily");
}
sort(args){
if (args === "daily") {
var sorted = this.state.rows.sort(function(a, b){
return a.points-b.points;
});
this.setState(sorted.reverse());
}
if (args === "total") {
var sorted = this.state.rows.sort(function(a, b){
return a.total-b.total;
});
this.setState(sorted.reverse());
}
}
render() {
const Rows = this.state.rows.map((obj, i) => <Row key={i} num={i} name={obj.name} points={obj.points} total={obj.total}/> );
return (
<div className="col-md-10 col-md-offset-1">
<table className="table table-hover">
<tbody>
<tr>
<th colSpan="4" className="text-center">Leaderboard</th>
</tr>
<tr>
<th> Number </th>
<th> Name </th>
<th onClick={() => this.sort("daily")}> Points </th>
<th onClick={() => this.sort("total")}> All time points </th>
</tr>
{Rows}
</tbody>
</table>
</div>
);
}
} }
This works, but I'm getting a message in the console: 这有效,但我在控制台中收到一条消息:
Warning: setState(...): Can only update a mounted or mounting component. 警告:setState(...):只能更新已安装或安装的组件。 This usually means you called setState() on an unmounted component.
这通常意味着您在已卸载的组件上调用了setState()。 This is a no-op.
这是一个无操作。 Please check the code for the Leaderboard component.
请检查排行榜组件的代码。
Can this warning be safely ignored? 这个警告可以安全地被忽略吗?
This is happening because you're calling this.sort("daily")
in your constructor, which is calling this.setState
before the component is mounted. 发生这种情况是因为你在构造函数中调用
this.sort("daily")
,它在安装组件之前调用this.setState
。
Instead call this.sort("daily")
in componentWillMount
or componentDidMount
. 而是在
componentWillMount
或componentDidMount
调用this.sort("daily")
。
EDIT 编辑
As @robertkelp pointed out you should change your sorting and setState to something like this: 正如@robertkelp指出你应该将你的排序和setState更改为这样的:
var sorted = this.state.rows.slice(0).sort(function(a, b){
return a.points-b.points;
});
this.setState({rows: sorted.reverse()});
Note that it's doing slice(0)
to clone your array and properly setting state into the rows
property. 请注意,它正在执行
slice(0)
来克隆您的数组并正确地将状态设置为rows
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.