如何在反應中正確更新 state

Question

我正在學習反應，我正在努力理解它，所以我正在嘗試練習一下。 所以我決定從數組中刪除一個元素。 所以這就是我想要做的事情：當用戶單擊 UI 中的一個項目時，我使用該元素的索引來刪除它並更新 state，這是我使用的代碼。

    class App extends Component  {
    
         state={
            persons: [
              { id: 'asfa1', name: 'Max', age: 28 },
              { id: 'vasdf1', name: 'Manu', age: 29 },
              { id: 'asdf11', name: 'Stephanie', age: 26 },
            ],
        
            showPersons:false,
          }
          deletePersonsHandler=(index)=>{
        const persons= [...this.state.persons];
        persons.splice(index,1)
        this.setState({persons:persons.splice(index,1)});
        console.log(this.state)
        console.log(persons)
          } 
               this.state.persons.map((el,index)=>{
              return(
                <Person key={el.id} name={el.name} age={el.age} click={(index)=>{this.deletePersonsHandler(index)}}></Person>
              )
            }
}

正如您在deletePersonsHandler()中看到的那樣，我從 people 數組創建一個副本，然后立即更新 state 發生的情況是我單擊的元素沒有被刪除，而是我只卡在第一個元素上，但 rest被刪除，無論我點擊哪個元素，數組都只有兩個元素

在我點擊之前：

在我點擊任何元素后：

這是 state：

這是我新創建的 people 數組：

順便說一句，我設法使用這段代碼解決了這個問題：

  deletePersonsHandler=(index)=>{
const persons= [...this.state.persons];
persons.splice(index,1)
this.setState({persons:persons});
  }

但我想知道我第一次嘗試時做錯了什么，為什么它沒有按我想要的方式工作，我還是一個反應的初學者，請對我放輕松，提前謝謝你。 注意：我還有另一個組件是人員組件（我認為在這里包含並不重要）

Answer 1

在第一次嘗試中，您只需使用僅包含已刪除元素的數組的新副本設置 state。

this.setState({persons:persons.splice(index,1)});
// returns removed element

接着

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

在刪除數組中的項目后設置元素。

看附圖

Answer 2

除了 App 之外，您應該創建另一個 class 並且應該添加一個構造函數，並且您應該在那里聲明您的 state。

class MyComponent extends React.Component{
  constructor() {
    super();
    this.state = {
      persons: [
        { id: 'asfa1', name: 'Max', age: 28 },
        { id: 'vasdf1', name: 'Manu', age: 29 },
        { id: 'asdf11', name: 'Stephanie', age: 26 }
      ],
      showPersons: false
    }
  }
}

在構造函數下方，您應該聲明您的 function：

  deletePersonsHandler(index) {
    const persons = [...this.state.persons];
    persons.splice(index, 1);
    this.setState({ persons });
  }

但是，您需要綁定該方法，例如：

  constructor() {
    ...
    this.deletePersonsHandler = this.deletePersonsHandler.bind(this);
  }

最后將渲染 function 添加到您的 class 中，例如：

class MyComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      persons: [
        { id: "asfa1", name: "Max", age: 28 },
        { id: "vasdf1", name: "Manu", age: 29 },
        { id: "asdf11", name: "Stephanie", age: 26 }
      ],
      showPersons: false
    };
    this.deletePersonsHandler = this.deletePersonsHandler.bind(this);
  }

  deletePersonsHandler(index) {
    const persons = [...this.state.persons];
    persons.splice(index, 1);
    this.setState({ persons });
  }

  render() {
    return (
      <div>
        {this.state.persons.map((el, index) => {
          return (
            <Person
              key={el.id}
              name={el.name}
              age={el.age}
              click={() => {
                this.deletePersonsHandler(index);
              }}
            />
          );
        })}
      </div>
    );
  }
}

你可以在這里檢查這個工作