javascript - 如何设置状态列表的所有元素
问题描述
我有一个字符串名称数组,我想在下面做
let accountcode:{a:1,b:2};
let array=["first","second",third];
this.setState({[array[0]:accountCode,array[1]:accountCode,array[3]:accountCode]})
但是数组是动态列表,我应该在数组和 setState 中映射它的每个项目在一个 setState 我尝试
object.setState(
{...stateName:accountCodes}
)
但不工作,我也在下面尝试并且不抛出语法错误:
object.setState(
stateName.map(s=>{[s]=accountCodes})
)
我该怎么办?
解决方案
你可以使用reduce函数来实现它。数组中的每次迭代都会将元素添加到具有计算属性的对象中:
const accountcode = { a: 1, b: 2 };
const array = ["first","second","third"];
this.setState(array.reduce((acc, val) => ({[val]: accountcode, ...acc}), {}));
工作示例:
class App extends React.Component {
componentDidMount(){
const accountcode = { a: 1, b: 2 };
const array = ["first", "second", "third"];
this.setState(array.reduce((acc, val) => ({ [val]: accountcode, ...acc }), {}));
}
render(){
console.log(this.state)
return <div></div>
}
}
ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.1/umd/react-dom.production.min.js"></script>
<div id='root'>
推荐阅读
- java - 如何使用 java-lambda 按相似键进行分组?
- java - JavaFX 项目在 Eclipse 中运行,但不在 Intellij Idea 中
- vue.js - 如何使用 Quasar QexpansionItem 制作递归菜单
- php - 上传图片时调整图片大小
- pepper - QiChat 语言语法 _* 不起作用,如何解决?
- java - 连接到 Floodlight 控制器时出现 javax.crypto.AEADBadTagException
- c# - 使用 ASP.NET Grid 显示分层 xml 数据
- python - 如何检测用户何时按下关闭按钮
- r - 在 R 中生成 XML 文档
- java - java - 如何使用poi获取java中单元格的数据验证源?