Javascript 反应组分'；s状态在“渲染”中的值与在“设置状态”中的值不同

在组件的按钮单击和该组件的渲染之间发生了一个奇怪的问题。在按钮单击的处理程序中，我设置了组件的状态。对于其中一个状态值，我将一个空对象推到数组上，并增加另一个状态值。在渲染时，将空对象添加到的状态值变为整数

我在函数中添加了

componentWillUpdate

和

componentdiddupdate

，以查看在到达这些函数之前状态是否已经发生了更改，确实如此

class ItemGrouping extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            items: this.props.items,
            count: this.props.count,
            groupingName: this.props.groupingName
        };
        this.addItem = this.addItem.bind(this);
    }

    addItem(event) {
        event.preventDefault();
        this.setState((previousState, previousProps) => {
            return {
                count: previousState.count + 1,
                items: previousState.items.push({}),
                groupingName: previousState.groupingName
            };
        });
    }

    render() {
        let count = this.state.count;
        let items = this.state.items.map((item, index) => {
             let currentIndex = count;
             count += 1;
             return (
                 <EditableItem key={count} item={item} count={currentIndex} />
             );
        });

        return (
            <section className="card">
                {this.state.groupingName != '' &&
                    <h3 className="card-header">{this.state.groupingName}</h3>
                }
                <div className="card-body">
                     <div className="row item-grouping" data-grouping={this.state.groupingName}>
                        <div className="col-12">
                            {items}
                        </div>
                    </div>
                </div>
                <div className="card-footer">
                    <div className="d-flex justify-content-center">
                        <button className="btn btn-success" onClick={this.addItem} type="button"><i className="dripicons-plus"></i> Add an Item</button>
                     </div>
                </div>
            </section>
        );
    }
}

添加后的预期结果：

state.count: 2,
state.items: [{id: '', value: ''}, {}]

state.count: 2,
state.items: 3

添加后的实际结果：

state.count: 2,
state.items: [{id: '', value: ''}, {}]

state.count: 2,
state.items: 3

---

子组件是否会导致状态更改？页面上没有父组件会触发此组件的状态更改，因此我有点不知所措。

问题似乎是：

items:previousState.items.push（{}）

，

push

方法返回数组的长度，而不是结果数组

---

您可以使用如下内容来代替

push

：

items:[…previousState.items，{}]

或

items:previousState.items.concat（{}）

问题似乎在于：

items:previousState.items.push（{}）

，方法返回数组的长度，而不是结果数组

---

您可以在旁注上使用以下内容来代替

push

：

items:[…previousState.items，{}]

，或

items:previousState.items.concat（{}）

。。顺便说一句。。非常感谢你，泰特斯。看来我需要温习一下MDN文档。非常感谢你给我这个提图斯。看来我需要复习一下MDN文档。