Реагировать готовый элемент к списку

Question

Я пытаюсь добавить элемент в список:

addPersonHandler = () => {
    const newPerson = {
          id: "new",
          edit: true,        
          name: "",
          dni: "",
          onDelete: this.discardHandler
        };

    // I want to prepend the new person to the people list.
    this.setState({addingPerson: true, people: {[newPerson].concat(this.state.people)});
}

Но это ВСЕГДА отдает ПОСЛЕДНЮ!

<ul>
    People.map((p, i) => {
      return <li key={p.id}>
        <Person 
          id={p.id} 
          name={p.name} 
          dni={p.dni} 
          onDelete={p.id=="new"? this.discardHandler: this.deleteHandler}
          edit={p.edit}         
          />
      </li>
    });    
</ul>

Я действительно не знаю, почему, если я добавляю его в начало списка, оно отображается последним ...

Answer 1

<ul>
          <Person 
          id={p.id} 
          name={p.name} 
          dni={p.dni} 
          onDelete={p.id=="new"? this.discardHandler: this.deleteHandler}
          edit={p.edit}         
          />
    People.map((p, i) => {
      return <li key={p.id}>

      </li>
    });    
</ul>

Answer 2

Вы можете использовать спред на исходном массиве и удалить {} упаковочный новый массив

this.setState({addingPerson: true, people: [newPerson, ...this.state.people]);

Answer 3

Рассмотрим метод unshift() , который можно использовать для добавления одного или нескольких элементов к массиву people.

Имейте в виду, что метод unshift() изменяет массив, в котором он вызывается:

addPersonHandler = () => {

    const newPerson = {
          id: "new",
          edit: true,        
          name: "",
          dni: "",
          onDelete: this.discardHandler
        };


       // Get people array from current state
       const people = this.state.people;

       // Prepends the newPerson to the start of people array
       people.unshift(newPerson);

       // Return the updated state to your component for re-render
       this.setState({ addingPerson : true, people : people });
}

Answer 4

Попробуйте вот так, возьмите состояние в одной новой переменной массива и вставьте в нее новый объект, наконец обновите состояние.

  addPersonHandler = () => {
      const newPerson = {
        id: "new",
        edit: true,
        name: "",
        dni: "",
        onDelete: this.discardHandler
      };

      let pplArr = this.state.people;
      pplArr.push(newPerson);
      this.setState({ addingPerson: true, people: pplArr });
    };