Question

我有一个处于反应状态的简单数组对象，其ID，名称和年龄分别为三个perons。我想使用输入来更改名称。我具有地图功能，可以在下面的输入字段中呈现每个人的信息，并在输入字段中更改人的姓名。以下是我的

代码

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

主要问题来自呈现key列表时的<Person>属性。看一下文档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}
  />
))}

ReactJs：输入onChange每次都需要更新以更改输入中的值

1 个答案: