React知识点整理（持续更新）

1. 方法必须要关联this，否则取不到state中的变量

方法一：在构造函数在红通过bind绑定this

constructor() {
    super()
    this.state = {
      channelId: 0,
      gatewayInfos: {
        "gatewayId": "3911031e449685f7",
        "serverIp": ""
      }
    };
    this.handleChange = this.handleChange.bind(this);
    this.updateGate = this.updateGate.bind(this)
  }

方法二：
直接在组件调用处，使用箭头函数

<TextField
  id="demo-dev-path"
  label="dev path"
  onChange={() => this.onTextChange()}
  margin="normal"
  value={val.devPath}
  fullWidth
  required
/>

2. select组件上的方法调用，以及传递多个参数

<TextField
  id="demo-dev-path"
  label="dev path"
  onChange={(e) => this.onTextChange(e,index)}
  margin="normal"
  value={val.devPath}
  fullWidth
  required
/>

3. 在setState方法中，如果是一个对象，则不能只设置其中的某一个属性，否则其他属性就会被去掉

constructor() {
    super()

    this.state = {
      channelId: 0,
      gatewayInfos: {
        "gatewayId": "3911031e449685f7",
        "serverIp": ""
      }
    }
}

错误写法：

  onGateIdChange(e){
    this.setState({
      gatewayInfos: {
        gatewayId: e.target.value,
      },
    });
  }

正确写法：

  onGateIdChange(e){
    this.setState({
      gatewayInfos: {
        gatewayId: e.target.value,
        serverIp: this.state.gatewayInfos.serverIp,
      },
    });
  }

本意是仅仅想变更对象下的某一个属性，所以就只设置gatewayId的值，是错误的，这样传递值的时候会丢失serverIp

4. 如何变更数组对象下的某一项

constructor() {
    super()

    this.state = {
      channelId: 0,
      loraModes: [
        {
          "channelIndex": 0,
          "devPath": "dev/spidev4.0.1",
          "loraFrq": [
            470.3,470.5,470.7,470.9,471.1,471.3,471.5,471.7
          ]
        },
        {
          "channelIndex": 1,
          "devPath": "dev/spidev4.0.2",
          "loraFrq": [
            471.9,472.1,472.3,472.5,472.7,472.9,473.1,473.3
          ]
        }
      ]
    }
}

 handleChange(val,index){
    let loraModes = [...this.state.loraModes]
    this.setState({
      loraModes: loraModes.map((item,id)=> {
        return id == index ? 
        {...item,channelIndex: val.target.value} 
        : item
      })
    });
  }