我在组件的按钮单击和该组件的渲染之间发生了一个奇怪的问题。在按钮单击的处理程序中，我设置了组件的状态。对于其中一个状态值，我将一个空对象插入数组并递增另一个状态值。在渲染时，我添加空对象的状态值变为整数。
我添加了 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
子组件是否会导致状态发生变化？页面上没有父组件会触发该组件的状态更改，所以我有点迷失。
最佳答案
问题似乎是这样的:items: previousState.items.push({}) ，push方法返回数组的长度而不是结果数组。
而不是 push你可以使用这样的东西:items: [...previousState.items, {}] ，或items: previousState.items.concat({})
关于javascript - React 组件的状态在 render 中的值与 setState 中的值不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54046929/