Question

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

我已经添加了功能componentWillUpdate和componentDidUpdate，以查看状态在到达这些功能之前是否已经改变，并且确实如此。

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: 1,
 state.items: [{id: '', value: ''}]

addItem之后的预期结果：

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

addItem之后的实际结果：

state.count: 2,
state.items: 3

子组件会导致状态改变吗？页面上没有父组件会触发该组件的状态更改，所以我有点迷茫。

Answer 1

问题似乎是这样的：items: previousState.items.push({})，push方法返回数组的长度而不是结果数组。

您可以使用类似push或items: [...previousState.items, {}]的代替items: previousState.items.concat({})

React组件的状态在渲染中的值与setState中的值不同

1 个答案: