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

Posted 2023-02-22

【中文标题】反应数组的对象更改顺序的更改值

【英文标题】：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
                           onChangethis.changePersonNameHandler/>
                  </li>
                  )
              )
            </ul>
          </div>
        )
    

【参考方案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 后面缺少一个 = 符号，但我猜在您的本地代码中没问题。