реагирует не обновляет DOM

Question

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        text: "",
        listItem: []
    }
    this.onChangeInput = this.onChangeInput.bind(this);
    this.addToList = this.addToList.bind(this);
    this.keyPress = this.keyPress.bind(this);
  }
  onChangeInput(event) {
    this.setState({
        text: event.target.value
    });
  }
  addToList () {
      let list = this.state.listItem;
      list.push(this.state.text);
      this.setState({
          text: ""
      });
      this.setState({
        listItem: list
      });
  }
  deleteItem(event) {
    console.log(event.target.remove());
  }
  keyPress (e) {
      if (e.key === "Enter") {
          this.addToList()
      }
  }
  render() {
    const listItem = this.state.listItem;
    const list = listItem.map((val, i) => 

        <li key={i.toString()} onClick={this.deleteItem}>
            {val}
        </li>


    );
    console.log(list);
    return (
      <div className="container">
          <Input onChange={this.onChangeInput} value={this.state.text}
              keyPress={this.keyPress}
          />
          <Button addToList={this.addToList}/>
          <ul>
              {list}
          </ul>
      </div>
    );
  }
}
class Input extends Component {

  render() {
    return <input type="text" className="input" onChange={this.props.onChange}
     onKeyPress={this.props.keyPress}
     value={this.props.value}/>;

  }
}
class Button extends Component {
  render() {
    return (
      <button className="button" onClick={this.props.addToList}>
        Add To List
      </button>
    );
  }
}


ReactDOM.render(<App />, document.getElementById("root"));

Я очень смущен и не могу найти решение где-либо. Я новичок, чтобы реагировать. когда я удаляю элементы списка, я удаляю их из DOM, но в состоянии и я не удаляю их из состояния. Я ставлю console.log(list) в методе рендеринга и при каждом нажатии на клавишу списка журналов в консоли у меня возникает вопрос, почему DOM не выполняет рендеринг списков и не выводит те, которые были удалены из DOM, а не из состояния? и почему он работает для новых элементов списка и игнорирует те, которые удалены из DOM?

Answer 1

реагирует на получение обновления обновлением так, как вы его делаете

deleteItem(event) {
   console.log(event.target.remove());
}

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

deleteItem(e) {
  const list=  this.state.listItem;
  list.pop() // remove the last element
  this.setState({
    list: list
  });
}