许多值被添加到数组 onChange (INPUT)答案

【问题标题】：Many values being added to array onChange (INPUT)许多值被添加到数组 onChange (INPUT)
【发布时间】：2020-02-05 20:36:43
【问题描述】：

我正在开发一个基于 React 的应用程序，其中包含一个表单，首先，用户必须输入有多少人，然后用户必须输入每个人的年龄。如果用户键入 4，它将呈现 4 个输入。

我正在调用 onChange 函数来设置数组中每个年龄的状态：

  <input onChange={e => {this.setState({
    idades: [... this.state.idades, e.target.value]
  })}}/>

问题是，如果我输入任何人的年龄，例如：21，它将添加到数组中：["2","21"]，而不是添加["21"]。如果我擦除整个输入并写入3，则数组将为：["2", "21", "2", "", "3"]。

【问题讨论】：

亲爱的易卜拉欣，我真的很想帮助你，但请解释一下你的问题。
您好@AmerllicA，感谢您的留言。当我更改输入的值时，它会将新值添加到数组而不是更新它。
亲爱的@IbrahimOrra，您应该区分每个新input 的统计值我认为这个问题与您的架构师有关，请认真思考并设计一个动态状态。我试着回答你的问题，但你自己比我更努力。
@AmerllicA 好吧，我想我会回顾一下我调用输入的方式。谢谢你的动力。呵呵:)
感谢您的好意，我会根据我对您问题的理解留下答案，并为您的帖子点赞以获得更多动力；）

标签： javascript arrays reactjs vector

【解决方案1】：

将状态设置为一个对象，其中键是输入的索引，值是用户插入的值。像这样：

{
 0: 21,
 1: 3
}

然后更新状态：

const context = this;
[...Array(this.state.numberOfPersons)].map((e, index) => 
  <input 
    key={index} 
    onChange={ev => {
      context.setState(prevState => ({
        idades: {
          ...prevState.idades,
          [index] = ev.target.value
        }
      }))}
    }
  />)

【讨论】：

嗨，迈克，感谢您的回答。请给我一个例子好吗？
嘿易卜拉欣，更新了答案。

【解决方案2】：

我认为您应该为您的组件创建一个动态的state，如下所示：

import React, { PureComponent } from 'react';

class YourCompo extends PureComponent {
  state = {
    inputArr: [],
  };

  handleNumberOfInputs = e =>
    this.setState({
      inputArr: Array(e.target.value)
        .fill()
        .map((_, index) => ({ key: index, value: '' })),
    });

  handleChangeOfNewInputs = index => e => {
    const { inputArr } = this.state;
    const newInputArr = inputArr.map(
      (item, i) =>
        index === i ? { key: item.key, value: e.target.value } : item
    );

    this.setState({
      inputArr: newInputArr,
    });
  };

  render() {
    const { inputArr } = this.state;

    return (
      <div>
        <input type="number" onChange={this.handleNumberOfInputs} />
        {inputArr.map(({ key, value }, index) => (
          <input
            key={key}
            value={value}
            type="number"
            onChange={this.handleChangeOfNewInputs(index)}
          />
        ))}
      </div>
    );
  }
}

export default YourCompo;

它可以由 Hooks 编写，但我认为这个答案对你来说可能更具可读性，也许它不能满足你的愿望，但它有它的潜力。

【讨论】：