Идентификатор персонажа изменяется при изменении текстового поля, связанного со вторым элементом. Идентификатор для первого и второго элемента обновляется как 20 - PullRequest
Новая
       34

Идентификатор персонажа изменяется при изменении текстового поля, связанного со вторым элементом. Идентификатор для первого и второго элемента обновляется как 20

0 голосов
/ 07 апреля 2020

ошибка при обновлении второго элемента. Редактирование текстового поля, связанного с первым элементом, работает нормально. Но при редактировании второго элемента в консоли появляется следующая ошибка:

Обнаружено 2 дочерних элемента с одинаковым ключом.

Приложение. js

import React ,{Component} from 'react';
import logo from './logo.svg';
import Person from './Person/Person'

class App extends Component {

  state = {
    Persons : [
      {id : "10" , name : 'sai', age : 27},
      {id : "20" , name : 'liz', age :28}
    ],
    showData : false
  }

  switchNameHandler = (newName) => {
    this.setState (
    {
      Persons : [
      {name : newName, age : 26},
      {name : 'lizbabe',age :27}
    ]
    })
  }

  nameChangeHandler = (event,Id) => {
    const personIndex = this.state.Persons.findIndex(p => {
      return p.id = Id;
    });

    const changedPerson = {
      ...this.state.Persons[personIndex]
    };
    changedPerson.name = event.target.value;

    const changedPersons = [...this.state.Persons];
    changedPersons[personIndex] = changedPerson;

      this.setState (
    {
      Persons : [...changedPersons]
    });
  }


  toogleDataHandler = () => {
    const doesShowData = this.state.showData;
    this.setState({showData : !doesShowData});
  }

  deletePersonDataHandler = (personIndex) => {
    const personDatas = this.state.Persons.slice();
    const personData = [...this.state.Persons];
    personData.splice(personIndex,1);
    this.setState({Persons : personData});
  }

  render(){
    const style = {

      font : 'inherit',
      border : '1px solid blue',
      padding : '8px',
      cursor : 'ponter'
    };

    let personsData = null;
    if (this.state.showData){
      personsData = (
        <div>
            {this.state.Persons.map((x,index) => {
                return <Person
                click = {()=>this.deletePersonDataHandler(index)}
                name ={x.name} 
                age = {x.age}
                key = {x.id}
                change = {(event) => this.nameChangeHandler(event,x.id)} />
            })
          }

        </div>
        );
    }

    return (
    <div className="App">
      <header className="App-header">
       <button onClick = {this.toogleDataHandler}>Toogle Data</button>
        {personsData}
      </header>
      </div>
  );
}
}

export default App;

человек. js

import React from 'react';
import './Person.css';
const personFunc = (props) => {
    return (
        <div className = "Person">
        <p onClick = {props.click}>This is {props.name} and I am {props.age} years old</p>
        <p>{props.children}</p>
        <input type ="text" onChange = {props.change} value = {props.name}/>
        </div>
        )
};

export default personFunc;
...