プッシュデータ

Question

私のプログラムは、いくつかの入力を生成して、私は入力evrythingの最初の行で私の状態の配列の

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

私は問題が反応状態の問題に関連していないと思う。 "プッシュ"メソッドを使用すると、配列は返されませんが、配列の長さが返されます。そのため、2回目に "プッシュ"メソッドを使用すると "this.state"エラーが発生します。 axisX.pushは関数ではありません "。あなたはあなたの状態を変更する必要がある場合

ので、あなただけのリターンとして新しい配列を取得するには、このように「連結」メソッドを使用することができます。idがあるべき

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"]