反應不更新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 中刪除但處於 state 中並且我沒有從 state 中刪除它。 我將console.log(list)放在渲染方法中，並且在控制台中的每個按鍵日志列表中，我的問題是為什么 DOM 不重新渲染列表並輸出那些從 DOM 中刪除而不是從狀態中刪除的列表？ 以及為什么它適用於新的列表項而忽略那些從 DOM 中刪除的項？

Answer 1

以您正在執行的方式做出反應來獲取更新

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

雖然item會被移除，但是react沒有任何線索發生，要通知react item已經改變需要重新渲染，你需要調用setState，然后react再次調用render方法，

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