reactjs - 尝试删除每个项目时使用 Hook set state undefined 做出反应

Question

我使用反应钩子并在'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: '[phone]' }],
    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 >
  );
}

标签： reactjs

Answer 1

试试这个并实时检查https://vvhoy.csb.app/

  const deletePersonHandler = item => {
    console.log(item);
    let filtered = personsState.persons.filter(
      person => person.age !== item.age
    );
    setPersonsState({ ...personsState, persons: filtered });
  };

传递完整的对象deletePersonHandler(person)

    <div>
        {personsState.persons.map((person, index) => {
          return <Person
            click={() => deletePersonHandler(person)}
            indexData={index}
            name={person.name}
            age={person.age}
            changed={(setNameChange) => nameChangeHandler(setNameChange)} />
        })}
      </div>

现场演示