react动态增加state_动态修改JS对象的值及React setState

一、在JS里使用(非ES6)

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

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}]

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

二、React setState的应用

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

class Example extends PureComponent{

...

handleChange = (val, type) => {

this.setState({

[type]: val

},() => {

console.log(`当前${type}的数量: ${this.state[type]}`)

})

}

...

render(){

...

return (

Banana:

this.handleChange(e.target.value, 'banana')}>

1

2

Orange:

this.handleChange(e.target.value, 'orange')}>

1

2

)

}

}

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

输出: .

当前banana的数量: 2

当前orange的数量: 2