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

Posted xiaobe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态修改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

以上是关于动态修改JS对象的值及React setState的主要内容,如果未能解决你的问题,请参考以下文章

27.react 使用setState修改当前state对象的值

react-hooks

React中的setState

React setState hook 之前的 param 对象给出了不一致的值

React 组件中的state和setState

react setState()方法可以只修改一个对象的部分属性