Javascript 反应-如何将对象推送到嵌套在数组中的数组
我目前正在学习React,如果我没有使用正确的术语,我深表歉意 我正在创建一个项目,它有多个列,每个列都有一个“添加”按钮。此按钮弹出打开一个模式,用户可以在其中输入一串文本。然后我希望返回这个文本字符串,并在特定列中显示它。根据我希望引用的列的索引,我在确定如何更新setState时遇到了麻烦 我从模式返回列ID,然后将该列ID与状态中设置的列ID进行比较。我想知道如何获取我获得的列[index],并使用它在addCard方法中使用card对象更新cards数组Javascript 反应-如何将对象推送到嵌套在数组中的数组,javascript,reactjs,Javascript,Reactjs,我目前正在学习React,如果我没有使用正确的术语,我深表歉意 我正在创建一个项目,它有多个列,每个列都有一个“添加”按钮。此按钮弹出打开一个模式,用户可以在其中输入一串文本。然后我希望返回这个文本字符串,并在特定列中显示它。根据我希望引用的列的索引,我在确定如何更新setState时遇到了麻烦 我从模式返回列ID,然后将该列ID与状态中设置的列ID进行比较。我想知道如何获取我获得的列[index],并使用它在addCard方法中使用card对象更新cards数组 class Board ext
class Board extends React.Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false,
columns: [
{
title: '',
id: uuid(),
cards: []
},
{
title: '',
id: uuid(),
cards: []
},
{
title: '',
id: uuid(),
cards: []
}
],
currentColumnID: null
};
}
openModal = (colID) => {
this.setState(state => {
return {
modalOpen: true,
currentColumnID: colID
};
});
};
closeModal = () => {
this.setState(state => {
return {
modalOpen: false
};
});
};
addCard = (cardValue) => {
const card = {
value: cardValue,
id: uuid()
};
// compare column IDs to currentColumnID
// return the index of whichever column is "true"
const index = this.state.columns.map((column, i) => {
if(column.id === this.state.currentColumnID) {
return i;
}
});
// add card to returned column
this.setState(state => {
return {
modalOpen: false
};
});
};
在您的
addCard
方法中。找到列,然后将卡推入阵列
addCard = (cardValue) => {
const card = {
value: cardValue,
id: uuid()
};
// Find the column
const column = this.state.columns.find(column => {
return column.id === this.state.currentColumnID;
})
// add card to returned column
if (column != null) {
column.cards.push(card);
}
this.setState(state => {
return {
modalOpen: false
};
});
};
您可以在setState中直接管理此项
addCard = cardValue => {
const card = {
value: cardValue,
id: uuid()
};
this.setState(prevState => ({
columns: prevState.columns.map(column => ({
...column,
cards: column.id === prevState.currentColumnID ? [...column.cards, card] : column.cards
})),
modalOpen: false
}))
};
您能发布更多的代码吗,比如组件的渲染方法,以及状态中的数据?谢谢您的快速响应。这正是我所需要的。