javascript - 将数据从多个输入推送到状态数组

Question

我的程序生成很少的输入，我尝试将数据推送到我的状态数组

export default class TransmittersTable extends Component {
  constructor() {
    super()
    this.state = {
      axisX: [],
      axisY:[],
      power: [],
    }
  }
  updateAxisX(e) {
    this.setState({
      axisX: this.state.axisX.push(e.target.value)
    })
  }
  updateAxisY(e) {
    this.setState({
      axisY: this.state.axisY.push(e.target.value)
    })
  }
  updateAxisPower(e) {
    this.setState({
      power: this.state.power.push(e.target.value)
    })
  }
  generateTransmittersItems(){
    let transmitters = [];
    for(let i = 0; i < this.props.numberOfTransmitters; i++) {
      transmitters.push(
        <tr>
          <td><input id={i} ref="axisX" type="text" onChange={this.updateAxisX.bind(this)}/></td>
          <td><input id={i} ref="axisY" type="text" onChange={this.updateAxisY.bind(this)}/></td>
          <td><input id={i} ref="power" type="text" onChange={this.updateAxisPower.bind(this)}/></td>
        </tr>
      );
    }
    return transmitters
  }
  componentWillMound(){}
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Axis X</th>
            <th>Axis Y</th>
            <th>Power</th>
          </tr>
        </thead>
        <tbody>
          {this.generateTransmittersItems()}
        </tbody>
      </table>
    )
  }
}

在第一行输入中，一切都可以，但是如果我尝试将另一个值从另一行输入推送到同一状态数组(例如 axisX)，我的控制台会向我发送此错误“this.state.axisX.push 不是”一个函数”。我做错了什么以及我必须做什么才能使用相同的函数将更多值从输入推送到同一数组？

Answer 1

我认为该问题与 react 状态问题无关。当您使用“push”方法时，它不会返回数组，而是返回数组的长度，这就是为什么当您第二次使用“push”方法时会收到错误“this.state.axisX” .push 不是一个函数”。

所以，如果你需要改变你的状态，你可以使用像这样的“concat”方法来获取一个新的数组作为返回:

this.setState({
  axisX: this.state.axisX.concat([e.target.value])
})

var a = ["Hi", "There"];
var b = a.push("Oh");

console.log(b); // get 3, not an array
console.log(a); // ["Hi", "There", "Oh"]