ReactJs：输入onChange需要每次更新才能改变输入中的值

Question

我有一个简单的数组对象处于反应状态，三个人的 ID、姓名和年龄。我想使用输入更改名称。我有地图功能来呈现每个人的信息和下面的输入字段，我用输入字段更改人的名字。下面是我的代码

app.js

import React, {Component} from 'react';
import 'Person' from 'person';

class App extends Component {
  state = {
    persons: [
      { id: 'asfa1', name: 'Max', age: 28 },
      { id: 'vasdf1', name: 'Manu', age: 29 },
      { id: 'asdf11', name: 'Stephanie', age: 26 }
    ]
  }

  nameChangedHandler = ( event, id ) => {
    const personIndex = this.state.persons.findIndex(p => {
      return p.id === id;
    });

    const person = {
      ...this.state.persons[personIndex]
    };

    // const person = Object.assign({}, this.state.persons[personIndex]);

    person.name = event.target.value;

    const persons = [...this.state.persons];
    persons[personIndex] = person;

    this.setState( {persons: persons} );
  }

  render() {
    let persons = null;
    persons = (
      <div> 
        {this.state.persons.map((person,index) =>{
          return <Person key={person.name}
          changed={(event) => this.nameChangedHandler(event, person.id)}
          name={person.name}
          age={person.age} />
        })}
      </div>
    )
    return ( 
      <div> 
        {persons} 
      </div>
    )
  }
}

persons.js

import React from 'react';

function Person(props) {
  return(
    <div>
      <p> Hello my name is {props.name} and age {props.age} </p>
      <input type="text" onChange={props.changed} value = {props.name} />
    </div>
  )
}

export default Person

我面临的问题是，每次输入值时，我都必须通过单击或选择输入字段将值输入到输入字段中，并且状态正在为输入字段中更改的每个字符更新。我应该如何解决这个问题？ .欢迎任何帮助我理解我的错误的想法，并提前致谢。希望我的问题可以理解。

Answer 1

主要问题来自您在渲染<Person> 列表时的key 属性逻辑。 看看文档，the section about lists and keys。

问题是，每次名称输入更改时，<Person> 的键都会更改（因为您将键设置为等于名称），因此实际上会呈现 <Person> 的另一个实例。键设置组件的标识。您想要的是使用具有身份语义的密钥，这意味着它们永远不会随着时间而改变。在您的情况下，请使用数组中的 id 字段。

{this.state.persons.map((person, index) => (
  <Person
    key={person.id}
    changed={(event) => this.nameChangedHandler(event, person.id)}
    name={person.name}
    age={person.age}
  />
))}