Javascript 如何在react中正确更新状态

我在学习如何反应，我试着让我的头脑清醒过来，所以我试着练习一下。 所以我决定从数组中删除一个元素。 下面是我想做的： 当用户单击UI中的某个项目时，我使用该元素的索引将其删除并更新状态，下面是我使用的代码

    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>
              )
            }
}

但是我想知道我第一次尝试的时候出了什么问题，为什么它没有按我想要的方式工作，我仍然是react的初学者，请对我放松，提前谢谢你。

---

注意：我有另一个组件，它是person组件（我认为在这里包含它并不重要）

在第一次尝试中，您只需使用仅包含已删除元素的数组的新副本设置状态

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

然后

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

正在删除数组中的项后设置元素

请看附件中的图片

---

你应该在App之外创建另一个类，你应该添加一个构造函数，并在那里声明你的状态

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
    }
  }
}

在构造函数下面，您应该声明您的函数：

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

但是您需要像这样绑定该方法：

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

最后将render函数添加到类中，如下所示：

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>
    );
  }
}

类MyComponent扩展了React.Component{ 构造函数（）{ 超级（）； 此.state={ 人员：[ {id:“asfa1”，姓名：“Max”，年龄：28}， {id:“vasdf1”，姓名：“Manu”，年龄：29}， {id:“asdf11”，姓名：“斯蒂芬妮”，年龄：26} ], 表演者:假 }; this.deletePersonHandler=this.deletePersonHandler.bind（this）； } deletePersonsHandler（索引）{ const persons=[…this.state.persons]； 人.拼接（索引1）； 这个.集合状态（{persons}）； } render（）{ 返回( {this.state.persons.map（（el，index）=>{ 返回( { this.deletePersonsHandler（索引）； }} /> ); })} ); } } 你可以检查一下这个工作状态

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>
    );
  }
}