javascript - 使用 setState 更改状态中的对象数组
问题描述
import React, {
Component
} from "react";
class App extends Component {
state = {
RSVP: [{
name: ["IronMan"],
isConfirmed: false
}]
};
handleChecked = () => {
this.setState({
isConfirmed: true
}););
};
render() {
return ( < div > {
this.state.RSVP && this.state.RSVP.length != 0 ? this.state.RSVP.map(({
name,
isConfirmed
}) => name && name.length != 0 ? ( <
div key = {
name
} > {
name
} < input type = "checkbox"
checked = {
isConfirmed
}
onChange = {
this.handleChecked
}
/></div > ) : null) : null
} < /div>);}}
export default App;
解决方案
您可以更改数组内对象的状态,您可以使用以下源代码:
handleChange = (index) => {
let tmp = [...this.state.RSVP];
tmp[index] = {...tmp[index],isConfirmed: true};
this.setState({RSVP: tmp})
}
推荐阅读
- azure - 如何不为磁盘多收费用?
- react-native - React Native - 警告:可能未处理的承诺拒绝(id:0)
- .net - EPPLus [Nuget] 依赖项
- java - 在方法完成之前未写入 DB 上的 JPA 更改
- objective-c - 连接 airpods 时扬声器不是可用输入
- vim - 如何使用 vscodevim 有效地将代码从编辑器复制到 VS Code 中的搜索字段?
- deployment - kubernetes 部署 - 容器未启动 - 错误 - InvalidImageName
- r - 将单元格中的单词移动到各个列
- ios - 以编程方式在 UISplitViewController 中的主视图上显示幻灯片
- plsql - PL/SQL“Where”条件“WHERE”子句