動態修改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 (
          <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