Question

我有React类，带有排序函数（List）和React类，用于简单元素（Elem）。如果排序函数已启动，它会对状态中的数组中的元素进行排序并重新呈现List，但保持不变，尽管状态中的数组已更改。代码：

var Elem = React.createClass({
    getInitialState() {
        var elem_name = this.props.name;
        return {
            name: elem_name
        }
    },
    render() {
        return <div>{this.state.name}</div>;
    }
});

var List = React.createClass({
    getInitialState() {
        return {
            received: false,
            arr: null
        }
    },
    receiving() {
        this.setState({
            received: true,
            arr: [1, 2, 3, 4, 5]
        });
    },
    sorting(type) {
        var self = this;
        return function() {
            function sort_func() {
                //sorting...
            }
            var main_arr = self.state.arr;
            main_arr.sort(sort_func);
            self.setState({
                arr: main_arr
            })
        }
    },
    render() {
        if(this.state.received) {
            var all_elems = [];
            this.state.arr.forEach(function(elem) {
                all_elems.push(<Elem name={elem}>);
            });
            return <div>
                <button onClick={this.sorting}>Sort</button>
                {all_elem}
            </div>
        }
        else {
            this.receiving();
            return <div>Empty</div>;
        }
    }
});

例如，排序后的数组是[5,4,3,2,1]。首先是HTML页面

<div>1</div><div>2</div>...<div>5</div>;

但是排序后的HTML页面保持不变，尽管状态中的数组已经改变了。

Answer 1

我已经对您的代码进行了重构，因为在您的版本中存在一些错误

在Elem中，您不需要使用state，
您可以在[{1}}中向this.receiving();添加初始数据，而不是使用arr，并避免在getInitialState方法中使用if / else < / LI>
而不是使用render更合适的使用`.map
而不是this.state.arr.forEach使用arrow functions
```
var self = this;
```

Example

React不会重新渲染

1 个答案: