反应数组的对象更改顺序的更改值答案

【问题标题】：React changing value of object change order of array反应数组的对象更改顺序的更改值
【发布时间】：2019-07-16 15:42:22
【问题描述】：

我对 React 有点陌生，我试图弄清楚如何改变我的对象的状态。但是，当我更改输入字段中的状态时，该字段将在底部重新呈现。

如何将我的输入字段与第一次呈现时保持在同一个位置。

class App extends Component {
    state = {
        persons: [{
            id: 0,
            name: ''
        },{
            id: 1,
            name: ''
        }]
    }
    
    changePersonNameHandler = event => {
        const id = parseInt(event.target.id);
        const newPersonName = event.target.value;

        this.setState({
            persons: [...this.state.persons.filter(i => i.id !== id),
                {
                    id,
                        name: newPersonName,
                }
            ]
        })
    }
    
    render () {
        const {persons} = this.state;
        
        return (
          <div>
            <ul>
              {persons.map((i, index)  => (
                  <li key={i.id}>
                      <label>Name: </label>
                      <input id={i.id}
                           value={i.name}
                           onChange{this.changePersonNameHandler}/>
                  </li>
                  )
              )}
            </ul>
          </div>
        )
    }
}

【问题讨论】：

标签： arrays reactjs object rendering state

【解决方案1】：

filter 删除一个项目，你失去它的位置。要修改项目并保留其在数组中的位置，请使用map。此外，最好不要依赖this.state 来获得setState 的新值。你应该改用setState(oldState => newState)。

changePersonNameHandler = event => {
    const id = parseInt(event.target.id);
    const newPersonName = event.target.value;

    this.setState(old => {
        const persons = old.persons.map(
            person => person.id !== id ? person : {id, name: newPersonName}
        );
        return {persons};
    })
}

【讨论】：

【解决方案2】：

每次进行更改时，将编辑后的人放在数组的末尾在您的 handleChange 方法中。

只需在 setState 中反转已编辑的和现有的，就可以了。

this.setState({
  persons: [{
      id,
      name: newPersonName,
    }, 
    ...this.state.persons.filter(i => i.id !== id)
    ]
  })
}

在您提供的代码中，onChange 后面缺少一个 = 符号，但我猜在您的本地代码中没问题。

【讨论】：