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

关键词：

【中文标题】将数据从多个输入推送到状态数组【英文标题】：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"]

【讨论】：

如何设置状态并推送到数组？

...classtableextendsComponentstate=arr:[],numofSub:1;我希望通过从我的数据库中获取将一个对象推送到具有设置状态的arr，提取效果很好我控制台记录了它，我似乎无法将对象推送到数组中：componentWillMo 查看详情

如何将表单中的输入中的多个值推送到 mongoose.model 中的对象数组？

】如何将表单中的输入中的多个值推送到mongoose.model中的对象数组？【英文标题】：HowcanIpushmultiplevaluesfrominputsinaformtoanarrayofobjectsinmongoose.model?【发布时间】：2019-08-2118:35:44【问题描述】：我正在使用向mongoose.model添加值的表单制... 查看详情

如何将状态推送到包含特定项目的数组？

】如何将状态推送到包含特定项目的数组？【英文标题】：HowcanIpushthestatetoanarraywithspecificitems?【发布时间】：2020-04-1007:57:48【问题描述】：我的大部分项目都处于我想将其推送到数组中的状态我想将所有状态推送到某些项目之... 查看详情

从异步回调函数将对象推送到本地数组

...器上使用node.js，并使用redis密钥库来存储有关我的角色的数据。每个连接都有它自己的特点。我想将所有关于字符的数据（人，有它的名字，年龄，职业，......）到Characters数组中，这样我 查看详情

如何使用ajax将数据推送到数组

】如何使用ajax将数据推送到数组【英文标题】：Howtopushdatatoarrayusingajax【发布时间】：2015-10-2323:09:24【问题描述】：我有一个页面列出产品-每个产品都有一个添加到购物车按钮。使用按钮中的数据属性，我需要将offerId字符串推... 查看详情

将复选框值推送到状态 onChange 的数组

】将复选框值推送到状态onChange的数组【英文标题】：PushcheckboxvaluetoarrayonstateonChange【发布时间】：2018-07-2615:21:36【问题描述】：我想让用户从复选框中选择星期几。当一个复选框被选中时，该复选框的值应该更新this.state.days。... 查看详情

将数据推送到数组中，但在将时间戳转换为日期之后

】将数据推送到数组中，但在将时间戳转换为日期之后【英文标题】：Pushdatainarraybutafterconvertingtimestamptodate【发布时间】：2020-07-1011:26:03【问题描述】：从Firestore获取数据并将其推送到数组中。这工作正常，但在此过程中，我正... 查看详情

将json数据推送到angular js中的现有数组

】将json数据推送到angularjs中的现有数组【英文标题】：Pushjsondatatoexistingarrayinangularjs【发布时间】：2014-10-1111:43:56【问题描述】：我在将数据推送到现有数组时遇到问题。您可以看到我正在将数据发布到表格中，但是，当用户输... 查看详情

Javascript/jQuery - 将项目推送到数组并从数组中删除

...间】：2018-02-1506:48:03【问题描述】：我目前有一个分布在多个页面上的复选框列表（分页），其值需要存储在本地存储中，以便我可以在另一个页面的其他位置列出它们。因此，我尝试将所有这些值存储在一个数组中，并通过添... 查看详情

从 Axios 响应中解析 XML，推送到 Vue 数据数组

】从Axios响应中解析XML，推送到Vue数据数组【英文标题】：ParseXMLfromAxiosresponse,pushingtoVuedataarray【发布时间】：2018-07-2502:02:31【问题描述】：在我的Vue应用程序中，我使用Axios获得了一个XML文件，并使用parseString将XML解析为JSON。然... 查看详情

无法弄清楚如何将数据异步推送到数组

】无法弄清楚如何将数据异步推送到数组【英文标题】：Can\'tfigureouthowtopushdatatoarrayasynchronously【发布时间】：2021-06-2511:29:02【问题描述】：这是我编写的一个函数，用于检索我存储在S3存储桶中的文件的元数据。它将存储桶中所... 查看详情

AngularJS：如何将数据从引导模式推送到表

】AngularJS：如何将数据从引导模式推送到表【英文标题】：AngularJS:Howtopushdatafrombootstrapmodaltotable【发布时间】：2016-12-2917:16:58【问题描述】：我有一个输入数据的引导模式，当单击提交按钮时，我想将数据推送到引导表中。但是... 查看详情

如何通过 mongoose 将多个数组元素推送到 mongodb

】如何通过mongoose将多个数组元素推送到mongodb【英文标题】：HowToPushmutiplearrayelementsintomongodbymongoose【发布时间】：2020-08-0220:14:14【问题描述】：有一个包含这些字段的mongodbSchema，它的类型是数组......orderlist:[id:String,price:Number,pho... 查看详情

将输入字段推送到数组并循环遍历

】将输入字段推送到数组并循环遍历【英文标题】：Pushinputfieldstoarrayandloopthrough【发布时间】：2020-09-1118:32:18【问题描述】：我想将我的表（特定行）中的一些输入字段添加到数组中。稍后我想循环遍历这个数组。我是这样做的... 查看详情

如何正确地将具有多个元素的新对象推送到数组中？

】如何正确地将具有多个元素的新对象推送到数组中？【英文标题】：Howtoproperlypushanewobjectwithmultipleelementintoanarray?【发布时间】：2020-01-0807:02:20【问题描述】：我正在尝试将新生成的对象推送到JavaScript中的数组中我有一个表单... 查看详情

无法将用户输入推送到 VueJS3 中的数组

】无法将用户输入推送到VueJS3中的数组【英文标题】：Can\'tpushuser-inputtoarrayinVueJS3【发布时间】：2021-07-1908:33:45【问题描述】：您好，很抱歉新手问题我试图在按钮单击时将HTML输入推送到现有数组中，但我找不到我的错误。任何... 查看详情

如何将键从对象推送到数组？

】如何将键从对象推送到数组？【英文标题】：HowdoIpushthekeysfromanobjecttoanarray?【发布时间】：2011-08-1710:09:51【问题描述】：假设我有以下对象obj：obj=\'key1\':[\'1\',\'2\',\'3\'],\'key2\':[\'1\',\'2\',\'9\'],\'key3\':[\'1\',\'3\',\'5\']如何将obj转换... 查看详情

如何从将每个 api 推送到数组中的函数中获取 api？

...时间】：2020-03-1800:43:17【问题描述】：我正在尝试获取API数据，以便可以使用ReactJS在网页上呈现它。我尝试了许多不同的方法来获取存储在数组中的api。但是我做不到。注意：https://www.hatchways.io/api/ass 查看详情