Reactjs 尝试删除每个项目时使用未定义的钩子集状态进行反应

我使用了react钩子，但在“setPersonState”的函数“deletePersonHandler”中没有定义。 在教程中，使用“this.setstate”可以删除每个项目，但在尝试时 已删除所有数据，但未返回。 当我看到日志“SetPersonState”“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>

Person.js
我是{props.name}我是{props.age}岁！{props.children}

{props.name}索引：{props.indexData}

App.js
//反应钩
常量应用=（）=>{
//陈述
//数组分解
常量[PersonState，SetPersonState]=useState({
人员：[
{姓名：'Max'，年龄：28}，
{姓名：'Manu'，年龄：29}，
{姓名：'Stephanie'，年龄：30}
],
其他州：[{电话：'+628762663994'}]，
真的,，
});
//事件onClick
常量deletePersonHandler=（personIndex）=>{
const persons=personstate.persons；
人员。拼接（人员索引，1）；
SetPersonState（{个人：个人}）；
控制台日志（人）；
log（setPersonState（{persons:persons}））；
};
//结束事件
//元素
让persons=null；
if（personstate.showPersons）{
人员=(
{personstate.persons.map（（person，index）=>{
返回deletePersonHandler（索引）}
indexData={index}
name={person.name}
年龄={person.age}
已更改={（setNameChange）=>nameChangeHandler（setNameChange）}/>
})}
);
}
//末端元件
返回(
你好，反应
switchNameHandle（'Button'）}>开关名称
onClick={（）=>TooglePersonHandler（）}>Toogle名称
{个人}
);
}

更换此车道 const persons=personstate.persons； 通过 const persons=[…personstate.persons]； 您需要包括以前的状态，如SetPersonState（{…PersonState，persons}），或者删除导致if为false的showPersons状态替换此通道 const persons=personstate.persons； 通过 const persons=[…personstate.persons]； 您需要包括以前的状态，如SetPersonState（{…PersonState，persons}），或者删除导致if为false的showPersons状态

传递完整对象

deletePersonHandler（person）

{personstate.persons.map（（person，index）=>{
返回deletePersonHandler（person）}
indexData={index}
name={person.name}
年龄={person.age}
已更改={（setNameChange）=>nameChangeHandler（setNameChange）}/>
})}

试试这个，然后检查live

传递完整对象

deletePersonHandler（person）

{personstate.persons.map（（person，index）=>{
返回deletePersonHandler（person）}
indexData={index}
name={person.name}
年龄={person.age}
已更改={（setNameChange）=>nameChangeHandler（setNameChange）}/>
})}

我希望它能起作用

---

---

我希望它能工作

，函数调用的未定义是因为函数不返回任何内容。我已经用const persons=[…personstate.persons]更改了const；但是仍然没有定义。我对使用this.setstate的教程感到困惑，但是当我使用hook时，我将代码设置为`setPersonState（{persons:persons}）；`当我console.log发现未定义的hmmOh时，我刚刚意识到了您的错误，当您调用setPersonState（..）时，您需要包括以前的状态，比如DetPersonState（{…PersonState，persons}）或者删除导致if为false的showPersons状态。函数调用中的未定义是因为函数不返回任何内容。我已经用const persons=[…personstate.persons]更改了const；但是仍然没有定义。我对使用this.setstate的教程感到困惑，但是当我使用hook时，我将代码设置为`setPersonState（{persons:persons}）；`当我console.log发现未定义的hmmOh时，我刚刚意识到您的错误，当您调用SetPersonState（..）时，您需要包括以前的状态，例如DetPersonState（{…PersonState，persons}），或者您删除了导致if为false的showPersons状态。仍然未定义工作感谢，让我明白谢谢你help@Piter如果这对你有帮助，请接受/投票…谢谢直到未授权的工作谢谢，让我理解谢谢help@Piter如果这对你有帮助，请接受/投票…谢谢这也是工作，谢谢。让我来理解它2个不同的代码形式的人和瓦希德·阿赫塔顿的不变异状态这也起作用，谢谢。让我来理解一下人类和瓦希德·阿赫塔顿的不变异状态的不同代码

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

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

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

const deletePersonHandler = (personIndex) => {
    //dont use splice because react state must be immutable
    setPersonsState({
        persons: personsState.persons.slice(0, index).concat(personsState.persons.slice(index + 1)),
        otherState: personsState.otherState,
        showPersons: personsState.showPersons
    });
};