如何在反应中正确更新 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>
    );
  }
}

你可以在这里检查这个工作