[英]How to add multiple items to array with reactjs
我有兩節課。 一個持有數組,另一個持有數組道具。 這些是我的課:
//父 CLASS:
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>
)
}
//孩子 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() }}>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
中設置初始的 state ,可以直接在構造函數中設置。
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() 之間的區別在於不變性。
如果您在數組上使用 push,它將改變原始數組並向該數組添加一個新值(錯誤)。
如果您使用 concat,它將為您創建一個新數組,而舊數組保持不變(正確)。
因此,您可能想要按照以下方式做一些事情:
addItem(item)
this.setState(state => {
const items = state.items.concat(item);
return {
items,
};
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.