Почему функция удаления заставляет react рендерить удаляемый элемент?

Question

[Алексей Юдов]

Привет всем. Хелп, изучаю react и чет запутался. Вот код, суть вопрос в заголовке.

constructor ()
    {
        super();
        this.state = { items: [
            { id: 0, text: 'Lorem ipsum dolor sit amet.' },
            { id: 1, text: 'Lorem ipsum.' },
            { id: 2, text: 'Lorem ipsum.1' }
        ] }
    }

// Функция удаления элемета
removeItem ( index )
    {
        for ( let item in this.state.items )
        {
            if ( index === this.state.items[item].id )
            {
                let newArr = this.state.items.splice( index, 1 );
                this.setState( { items: newArr } );
            }
        }

        alert( JSON.stringify(this.state) + " index " + index );
    }

// Функция рендера

render ()
    {
        return (
            this.state.items.map( ( item, index ) =>
            <div class="note-container">

                <div class="note-hidden-controls">
                    <button onClick={ () => this.removeItem( index ) } class="nhc-btn">
                        <i className="fas fa-trash"></i>
                    </button>
                    <button class="nhc-btn">
                        <i className="fas fa-edit"></i>
                    </button>
                </div>

                <h2>
                    { item.text }
                </h2>

            </div>
            )
        );
    }

Вот такой результат вышел:

Answer 1

[Антон Спирин]

Внимательно читаем, что возвращает метод Array.prototype.splice.

removeItem(index) {
  const newItems = [...this.state.items];
  newItems.splice(index, 1);
  this.setState({ items: newItems });
}

Правильней будет удалять элемент не по индексу, а по id:

removeItem(id) {
  this.setState({ 
    items: this.state.items.filter(item => item.id !== id), 
  });
}

Для этого передавайте id в хандлер:

<button onClick={() => this.removeItem(item.id)} class="nhc-btn">

Еще вы не передаете свойство key:
<div key={item.id} class="note-container">
Lists and keys

И такое форматирование кода никуда не годится. Почитайте гайдлайны от Airbnb:
Airbnb JavaScript Style Guide
Airbnb React/JSX Style Guide

Comments

[Алексей Беспалов]

Антон Спирин, спасибо за ссылки!

[Алексей Юдов]

Алексей Беспалов, серьезно? :D Тебе на ночь глядя на истерику разнесло? XD