我使用 React Hooks，在“setPersonsState”上的“deletePersonH​​andler”函数中未定义。 在教程中使用“this.setstate”可以删除每个项目，但是当我尝试时 所有数据都被删除并且没有返回。 当我看到日志“setPersonsState”'undefined' 用这个解决了

但仍然无法设置该状态，

Person.js

     <div className="Person">
          <p>I'm a {props.name} I am {props.age} years old! {props.children}</p>
          <button onClick={props.click}>{props.name} index: {props.indexData}</button>
          <input type="text" onChange={props.changed} value={props.name} />
     </div>

App.js


// React hooks
const App = () => {
  // state
  // array destructuring
  const [personsState, setPersonsState] = useState({
    persons: [
      { name: 'Max', age: 28 },
      { name: 'Manu', age: 29 },
      { name: 'Stephanie', age: 30 }
    ],
    otherState: [{ phone: '+628762663994' }],
    showPersons: true,
  });

  //Event onClick
  const deletePersonHandler = (personIndex) => {
    const persons = personsState.persons;
    persons.splice(personIndex, 1);
    setPersonsState({ persons: persons });

    console.log(persons);
    console.log(setPersonsState({ persons: persons }));

  };
  // End Event

  //element
  let persons = null;
  if (personsState.showPersons) {
    persons = (
      <div>
        {personsState.persons.map((person, index) => {
          return <Person
            click={() => deletePersonHandler(index)}
            indexData={index}
            name={person.name}
            age={person.age}
            changed={(setNameChange) => nameChangeHandler(setNameChange)} />
        })}
      </div>
    );
  }
  //end element

  return (
    <div className="App">
      <h1>Hello React</h1>
      <button className="button-cus"
        // onClick={() => switchNameHandle('Button')}>Switch Name</button>
        onClick={() => tooglePersonsHandler()}>Toogle Name</button>
      {persons}
    </div >
  );
}