Question

如何在ES6上将dinamic多输入格式存储到数组中？这是我尝试过的，但无法奏效。

这是我的州

state = {
  person: 9
  personInfo: []
}

这是我的循环数组和地图代码

let dataVisaPerson = []
      for (let person = 1; person <= this.state.person; person++) {
        dataVisaPerson.push({key: person, value: person, text: person + ' Persons'})
      }

    const PassportData = dataVisaPerson.map(PassportDataInfo => { return (
       <Form as={Segment} key={PassportDataInfo.key} loading={this.state.isLoading}>
         <h5>Person {PassportDataInfo.value}</h5> 
         <Form.Group widths="equal">
           <Form.Input value={this.state.personInfo[PassportDataInfo.value].number} onChange={e =>  {const number = this.state.personInfo; number[PassportDataInfo.value].number = e.target.value;}} />
           <Form.Input value={this.state.personInfo[PassportDataInfo.value].created} onChange={e => {const created = this.state.personInfo; created[PassportDataInfo.value].created = e.target.value;}} />
           <Form.Input value={this.state.personInfo[PassportDataInfo.value].expired} onChange={e => {const expired = this.state.personInfo; expired[PassportDataInfo.value].expired = e.target.value;}} />
         </Form.Group>
       </Form>

    return ({PassportData})

我错过了什么？

Answer 1

您需要使用setState来更新组件状态。永远不要直接改变它。

在您的情况下，您将需要使用更新的值创建数组的新版本，具体如下：

updatePerson = (value, index) => {
    this.setState({
        personInfo: [...this.state.personInfo].splice(index, 1, value)
    }) 
}

如何存储动态多数组状态反应

1 个答案: