反应不更新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"));

I'm very confused and couldn't find solution any where. I'm new to react. when I delete the list items, I delete them from DOM but is in state and I didn't delete it from state. I put console.log(list) in render method and on every key press logs list in console my question is why DOM does not re-render lists and output those where deleted from DOM and not from state? and why it works for new list items and ignore those that deleted from DOM ?

Answer 1

react dosent pickup the update in the way you are doing it

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

although the item will be removed , but react dosent have any clue that happend, to notify react that the items has changed and it need to re-render, you need to call setState , then react calls the render method again,

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