私のプログラムはいくつかの入力を生成し、私の状態の配列にデータをプッシュしようとしています
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 is not a function」というエラーが送信されます. 同じ関数を使用して入力から同じ配列により多くの値をプッシュするには、何が間違っていて、何をしなければなりませんか?
問題は反応状態の問題とは関係ないと思います。「プッシュ」メソッドを使用すると、配列は返されませんが、配列の長さが返されます。これが、2 回目に「プッシュ」メソッドを使用するとエラー「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"]この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加