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

Posted 2023-02-22

【中文标题】将数据从多个输入推送到状态数组

【英文标题】：Push data from multiple inputs to state array

【发布时间】：2017-09-12 05:18:41

【问题描述】：

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

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 不是一个函数”。 我做错了什么以及我必须做些什么才能使用相同的函数将更多值从输入推送到同一个数组？

【问题讨论】：

id 应该是唯一的不是吗？

你也应该使用这个：facebook.github.io/react/docs/…

【参考方案1】：

我认为这个问题与反应状态问题无关。 当你使用“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"]