动态修改JS对象的值及React setState

实现场景: 给一个空对象填充某一指定数组内的值 并随机生成数量

const fruit = [‘apple‘, ‘banana‘, ‘orange‘]let fruitInfo = {}fruitInfo = fruit.map(item => { ???return { ?????[item]: Math.floor(Math.random() * 10) ???}})console.log(fruitInfo)

输出:

[{apple: 2},{banana: 1},{orange: 9}]

这里的重点在于返回的时候 通过[]可以成功调用变量的值.

和上面例子同理.利用[]调用变量

class Example extends PureComponent{ ???... ???handleChange = (val, type) => { ???????this.setState({ ?????????[type]: val ???????},() => { ?????????console.log(`当前${type}的数量: ${this.state[type]}`) ???????}) ?} ???... ???render(){ ???????... ???????return ( ?????????<Fagement> ???????????<span>Banana: </span> ???????????????<select onChange={(e) => this.handleChange(e.target.value, ‘banana‘)}> ?????????????????<option value ="1">1</option> ?????????????????<option value ="2">2</option> ???????????????</select><br /> ???????????????????????<span>Orange: </span> ???????????????<select onChange={(e) => this.handleChange(e.target.value, ‘orange‘)}> ?????????????????<option value ="1">1</option> ?????????????????<option value ="2">2</option> ???????????????</select> ?????????</Fagement> ???????) ???}}

我们分别选择第二项的时候看看输出的结果

输出: .

当前banana的数量: 2当前orange的数量: 2

动态修改JS对象的值及React setState

原文地址：https://www.cnblogs.com/soyxiaobi/p/10040829.html