2017-04-16 87 views
1

我的程序生成投入少,我嘗試將數據推到我州陣列的數據推送到狀態數組

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不是函數」。 我做錯了什麼,我必須做什麼來使用相同的功能從輸入推動更多的值到同一個數組?

+0

ID應該是不是嗎? –

+0

也應該使用這個:https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous –

回答

0

我認爲問題與反應狀態問題無關。 當你使用「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"]