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

在第一行输入中，evrything是可以的，但如果我尝试将另一行输入的另一行推送到同一个状态数组（例如axisX），我的控制台会发送此错误“this.state.axisX.push不是一个功能“。我做错了什么以及我需要做些什么来使用相同的函数将更多的值从输入推送到同一个数组？

Answer 1

我认为这个问题与反应状态问题无关。当你使用＆＃34; push＆＃34;方法，它不会返回数组但返回数组的长度，这就是为什么当你使用＆＃34; push＆＃34;第二次方法会得到错误＆＃34; this.state.axisX.push不是函数＆＃34;。

所以，如果你需要改变你的状态，你可以使用＆＃34; concat＆＃34;像这样的方法来获取一个新的数组作为return：

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

＆＃13;

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

＆＃13;

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

1 个答案: