我有两节课。一个拿着阵列,另一个拿着阵列的道具。这些是我的课程:
//父类:
constructor() {
super()
this.state = {
items: []
}
this.addItem = this.addItem.bind(this)
}
componentDidMount(){
this.setState({
items: [{
name: 'Sebastian',
num: '001'
},{
name: 'Josh',
num: '002'
}]
})
}
addItem() {
??????
}
render() {
return(
<div>
<MethodA items={this.state.items} addItem={this.addItem}/>
</div>
)
}
//儿童班:
function MethodA(props) {
return(
<div>
{props.items.map((item, i) =>{
return(<div key={i}>
<span>{item.name}</span>
<span>{item.num}</span>
</div>)
})}
<button onClick={() => { props.addItem() }}>ADD ITEM</button>
</div>
)
}
当前结果是这样的:
<div>
<span>Sebastian</span>
<span>001</span>
</div>
<div>
<span>Sebastian</span>
<span>002</span>
</div>
然后点击“添加项目”按钮,这将是新结果:
<div>
<span>Sebastian</span>
<span>001</span>
</div>
<div>
<span>Sebastian</span>
<span>002</span>
</div>
<div>
<span>New Name</span>
<span>New Num</span>
</div>
我不确定在push()或concat()或两者之间使用什么以及如何使用。有什么想法吗?
首先,不需要在componentDidMount
中设置初始状态,您可以直接在构造函数中进行设置。
constructor(props) {
super(props);
this.state = {
items: [
{
name: "Sebastian",
num: "001"
},
{
name: "Josh",
num: "002"
}
]
};
this.addItem = this.addItem.bind(this);
}
要添加项目,您可以使用setState
的功能形式,您需要将该项目从子组件传递到回调中。
addItem(item) {
this.setState(state => ({
items: [...state.items, item]
}));
}
// Child class
function MethodA(props) {
return(
<div>
{props.items.map((item, i) =>{
return(<div key={i}>
<span>{item.name}</span>
<span>{item.num}</span>
</div>)
})}
<button onClick={() => props.addItem(item)}>ADD ITEM</button> // Pass item to the parent's method
</div>
)
}
这是交易。 push()和concat()之间的区别在于不变性。
如果在数组上使用推,它将使原始数组变异并向该数组添加新值(错误)。
如果使用concat,它将为您创建一个新数组,而旧数组保持不变(正确)。
所以您可能想按照以下方式做点事情:
addItem(item)
this.setState(state => {
const items = state.items.concat(item);
return {
items,
};
});
}