Question

我一直在尝试在加载组件时调用方法，以便对初始页面加载的数据进行排序。

在下面的示例中，我将状态设置为初始数据，然后立即调用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>
    );
}

}

这样可行，但我在控制台中收到一条消息：

警告：setState（...）：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）。这是一个无操作。请检查排行榜组件的代码。

可以安全地忽略此警告吗？

Answer 1

这种情况正在发生，因为您在构造函数中调用this.sort("daily")，构造函数在安装组件之前调用this.setState。

而是在this.sort("daily")或componentWillMount中调用componentDidMount。

修改

正如@robertkelp所指出的那样，你应该将你的排序和setState改为：

var sorted = this.state.rows.slice(0).sort(function(a, b){ return a.points-b.points; }); this.setState({rows: sorted.reverse()});

请注意，它正在执行slice(0)克隆您的数组并将状态正确设置为rows属性。

只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState（）

1 个答案: