Реагировать Удаление элемента из списка дел

Question

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

ЗВОНОК КЛАССА:

 <TodoList items={this.state.items} deleteItems={this.deleteItem}/>

КОД ПОДКЛАССА:

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.removeItem = this.removeItem.bind(this);

  }

  render() {

    return (
      <div>  
        { this.props.items.map((item, i) => (
          <div className={"col-12"} key={item.id}>
            <div className={"card text-white"}>
              <div className={item.priority}>
                <div className={"col-12 card-body"}>
                  <h1>{item.title}</h1>
                  <p>{item.text}</p>
                  <button onClick={() => { this.removeItem(item, i)}} key={i} className={"col-12 btn btn-primary bg-red"}>Delete</button> 
                </div>         
              <div/>
            </div>
          </div>
        </div>
        ))}
      </div>

    );

  }
  removeItem(e, i) {
    this.props.items.splice(i, '');
    console.log(i);
  }
}

Я рассматривал различные вопросы стека, но ни одно из решений, похоже, не относится к этомуСпасибо за любой конструктивный отзыв:)

Answer 1

Я считаю, что <TodoList /> компонент должен иметь свое собственное состояние.Однако, если вы не можете сделать это, есть 2 решения этой проблемы:

• Сохранение <ToDoList /> состояния компонента и его синхронизация (в случае, если родительский компонент изменяет состояние, передаваемое как элементы),Затем измените состояние <TodoList />.
• Объявите метод, который удаляет элемент внутри родительского компонента, который имеет состояние, и передает его как реквизиты ( Рекомендуется )

Пример кода:

class ParentComponent extends Component {
  state = {   
    items: [1, 2, 3]
  }

  removeItem = index => () => {
    this.setState(prevState => ({
      items: prevState.items.filter((_, i) => i !== index) //Filter the items
    }));
  };

  render() {
    return (
     <TodoList items={this.state.items} deleteItems={this.removeItem} />
    );
  }
}

Важно: Всегда использовать чистые функции для изменения состояния.Не используйте .splice() или .push() (если вы еще не клонировали штат).Всегда безопаснее использовать .filter(), .map(), .concat() и т. Д.