时间戳

首页 > 解决方案 > TypeError：this.state.persons.map 不是函数谢谢

javascript - TypeError：this.state.persons.map 不是函数谢谢

问题描述

我是新手，只了解基础知识。我从某人那里得到了这个项目来查看，但是从早上起我就一直在为这个问题挠头：

Uncaught TypeError: this.state.persons.map is not a function.

请，如果您可以尝试以简单但在引擎盖下的方式进行检查。谢谢你！

import React, { useState, Component } from 'react';
import './App.css';
import Person from './Person/Person';
import person from './Person/Person';
import { render } from '@testing-library/react';

class App extends Component {
   state =
   {
    persons:[
    {id: '123', name:'Max', age: 28 },
    {id: '124',name:'Mari', age: 26 },
    {id: '125',name: 'laly', age: 20 }

  ],
  showPersons: false 
  }

nameChangeHandler=( event,id ) =>
{ const personIndex = this.state.persons.findIndex(p=>{
  return p.id === id;
});

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

togglePersonHandler =  ()=>
{
const doesShow = this.state.showPersons;
this.setState ({showPersons: !doesShow});
}

deletePersonHandler= (personIndex)=> {
//const persons = this.state.persons;
const persons = [...this.state.persons]
persons.splice(personIndex,1);
this.setState({persons:persons});
}
  render()
{
  const style ={
    backgroundColor:'yellow',
    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}
    change ={(event) => this.nameChangeHandler(event,person.id)}
     />
     })};
  </div>)

  };

 return (

  <div className="App">
      <h1>Hi This is react App</h1>
      <button style={style} onClick={this.togglePersonHandler}> Toggle Persons</button>

       {persons}


    </div>
  ); 
    }
    }

export default App;

标签： javascriptreactjs

解决方案

错误在这里：

nameChangeHandler=( event,id ) =>
{ const personIndex = this.state.persons.findIndex(p=>{
  return p.id === id;
});

const person = {...this.state.persons[personIndex]
};
person.name=event.target.value;
const persons=[ ...this.state.persons];
persons[personIndex]=person;
  this.setState(
    {
      persons:person    ------------ > You are assigning a single object to a list in your state, so your map is giving an error, it must be {persons: persons}
    }
  )
}

推荐阅读