Javascript this.state.persons.map不是函数

我是个新来的反应者，只懂基本的。我从某人那里得到了这个项目，但我从早上就开始为这个问题挠头：“未捕获的类型错误：this.state.persons.map不是一个函数”。如果你能试着用简单但隐蔽的方式来检查它，我将非常感谢你的帮助

应用程序组件

class App extends Component {
  state = {               //not optional name state
    persons: [
      { id: "43qtf3w4", name: 'Igor', age: 19},
      { id: "445wgwre", name: 'Vasya', age: 20},
      { id: "t45wg45e",name: "Petya", age: 22}
    ],
    otherState: 'some other value',
    showPersons: false,
  }

  switchNameHandler = (newName) => {
    this.setState( {
      persons: [
        { name: newName, age: 19},
        { name: 'Vasya', age: 20},
        { name: "Petya", age: 27}
      ] 
    } )
  }

  nameChangedHandler = (event, id) => {

    const personIndex = this.state.persons.findIndex( (person) => person.id ===id);
    const person = {...this.state.persons[personIndex]};
    person.name = event.target.value;

    const persons = {...this.state.persons};
    persons[personIndex] = person;
    this.setState( {
      persons: persons
    } )
  }

  deletePersonHandler = (personIndex) => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);

    this.setState( {
      persons: persons,
    } )
  }

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;

    this.setState( {
      showPersons: !doesShow,
    } )
  }


  render() {
    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer',
    }

    let persons = null;

    if ( this.state.showPersons) {
      persons = (
        <div >

          {this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name}
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler( event, person.id)}/>
          })}
        </div>  
      )
    }

    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is realy working</p>
        <button 
          style={style}
          onClick ={ this.togglePersonsHandler}>Toggle Persons</button>
        {persons}
      </div>
    );

  }
}

const person = (props) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm a {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name}/>
        </div>
    )
};  

类应用程序扩展组件{
state={//不是可选的名称状态
人员：[
{id:“43qtf3w4”，姓名：'Igor'，年龄：19}，
{id:“445wgwre”，姓名：'Vasya'，年龄：20}，
{id:“t45wg45e”，姓名：“Petya”，年龄：22}
],
otherState:“其他值”，
表演者:假,，
}
switchNameHandler=（新名称）=>{
此.setState（{
人员：[
{姓名：newName，年龄：19}，
{姓名：'Vasya'，年龄：20}，
{姓名：“彼佳”，年龄：27}
] 
} )
}
nameChangedHandler=（事件，id）=>{
const personIndex=this.state.persons.findIndex（（person）=>person.id==id）；
const person={…this.state.persons[personIndex]}；
person.name=event.target.value；
const persons={…this.state.persons}；
人员[人员索引]=人员；
此.setState（{
人:人
} )
}
deletePersonHandler=（personIndex）=>{
const persons=[…this.state.persons]；
人员。拼接（人员索引，1）；
此.setState（{
人:人,，
} )
}
TogglePersonHandler=（）=>{
const doesShow=this.state.showPersons；
此.setState（{
表演人：！表演，
} )
}
render（）{
常量样式={
背景颜色：“白色”，
字体：“继承”，
边框：“1px纯蓝色”，
填充：“8px”，
光标：“指针”，
}
让persons=null；
如果（本.州.表演人）{
人员=(
{this.state.persons.map（（person，index）=>{
返回此.deletePersonHandler（索引）}
name={person.name}
年龄={person.age}
key={person.id}
changed={（event）=>this.nameChangedHandler（event，person.id）}/>
})}
)
}
返回(
嗨，我是React应用程序
这真的很有效

切换人
{个人}
);
}
}

人成分

class App extends Component {
  state = {               //not optional name state
    persons: [
      { id: "43qtf3w4", name: 'Igor', age: 19},
      { id: "445wgwre", name: 'Vasya', age: 20},
      { id: "t45wg45e",name: "Petya", age: 22}
    ],
    otherState: 'some other value',
    showPersons: false,
  }

  switchNameHandler = (newName) => {
    this.setState( {
      persons: [
        { name: newName, age: 19},
        { name: 'Vasya', age: 20},
        { name: "Petya", age: 27}
      ] 
    } )
  }

  nameChangedHandler = (event, id) => {

    const personIndex = this.state.persons.findIndex( (person) => person.id ===id);
    const person = {...this.state.persons[personIndex]};
    person.name = event.target.value;

    const persons = {...this.state.persons};
    persons[personIndex] = person;
    this.setState( {
      persons: persons
    } )
  }

  deletePersonHandler = (personIndex) => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);

    this.setState( {
      persons: persons,
    } )
  }

  togglePersonsHandler = () => {
    const doesShow = this.state.showPersons;

    this.setState( {
      showPersons: !doesShow,
    } )
  }


  render() {
    const style = {
      backgroundColor: 'white',
      font: 'inherit',
      border: '1px solid blue',
      padding: '8px',
      cursor: 'pointer',
    }

    let persons = null;

    if ( this.state.showPersons) {
      persons = (
        <div >

          {this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name}
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler( event, person.id)}/>
          })}
        </div>  
      )
    }

    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is realy working</p>
        <button 
          style={style}
          onClick ={ this.togglePersonsHandler}>Toggle Persons</button>
        {persons}
      </div>
    );

  }
}

const person = (props) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm a {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name}/>
        </div>
    )
};  

constperson=（道具）=>{
返回(
我是一个{props.name}，我是{props.age}岁
{props.children}

)
};  

在

nameChangeHandler（）

函数中，您将

人员设置为对象：

const persons = {...this.state.persons}

它没有
.map（）。非常感谢。