未处理的拒绝TypeError：this.state.personals.map 不是函数

如何解决未处理的拒绝TypeError：this.state.personals.map 不是函数

我收到“未处理的拒绝（类型错误）：this.state.personals.map 不是函数”错误。

当我单击“搜索”按钮时出现错误。所有其他按钮都在工作。 componentDidMount 和 searhPersonal 方法相同，但是 componentdidmount 方法为所有个人带来信息，searchPersonal 按钮只带来一个个人信息。

这是我的代码。

class PersonalSearch extends Component {
 
  constructor(props) {
    super(props)

    this.state = {
            personals: [],identity:''         
    }
    this.addPersonal = this.addPersonal.bind(this);
    this.searchPersonal = this.searchPersonal.bind(this);
    this.editPersonal = this.editPersonal.bind(this);
    this.deletePersonal = this.deletePersonal.bind(this);
    this.handleChange = this.handleChange.bind(this);
}

deletePersonal(identity){
    PersonalService.deletePersonal(identity).then( res => {
        this.setState({personals: this.state.personals.filter(personal => personal.identity !== identity)});
    });
}

viewPersonal(identity){
    this.props.history.push(`/view-personal/${identity}`);
}

editPersonal(identity){
    this.props.history.push(`/add-personal/${identity}`);
}

componentDidMount(){
    PersonalService.getPersonals().then((res) => {
        this.setState({ personals: res.data});
    });
}

searchPersonal(identity){
  alert(identity);
  PersonalService.getPersonalById(identity).then( res => {
    this.setState({ personals: res.data});
    console.log('personal => ' + JSON.stringify(this.state.personals));
});
}

addPersonal(){
    this.props.history.push(`/add-personal/_add`);
}

handleChange = (identity,event) => {
  this.setState({ identity: event.target.value });
}

  render() {

    return (
      <div>
        
        <form className='form-container3' >
          <div><TextField id="identity" label="Personel Sorgulama" style={{ width: 300 }} inputProps={{ style: { height: 10 } }} placeholder="Kimlik Numarası Giriniz" onChange={(event) => this.handleChange('identity',event)} InputLabelProps={{ shrink: true,height: 20 }} variant="outlined" /></div>
          <div><Button variant="contained" style={{ width: 130,height: 45,backgroundColor: '#a10505',color: "white" }} size="medium" onClick={ () => this.searchPersonal(this.state.identity)} >SEARCH</Button></div>
        </form>

        <form className='form-container3' >
          <div><Button variant="contained" style={{ width: 150,height: 40 }} size="medium" color="primary" onClick={this.addPersonal}> ADD</Button> </div>
        </form>
        
        <div> 
        <Table  style={{width:1100,marginLeft:400,marginTop:50}}>
       <thead>
    <tr>
        <th> TC KİMLİK NO</th>
        <th> AD SoyaD</th>
        <th> MEDENİ HAL</th>
        <th> DOĞUM YERİ</th>
        <th> DOĞUM TARİHİ</th>
        <th> CEP TELEFONU</th>
        <th> İŞLEMLER</th>
    </tr>
</thead>
<tbody>
    {
         this.state.personals.map(
            personal => 
                 <tr key = {personal.identity}>
                 <td> {personal.identity}</td>   
                 <td> {personal.name}</td>   
                 <td> {personal.marialStatus}</td>
                 <td> {personal.birthPlace}</td> 
                 <td> {Moment(personal.birthOfDate).add(1,"d").format("DD.MM.YYYY")}</td> 
                 <td> {personal.phoneNumber}</td>  
                 <td >
              <Button variant="contained" style={{ width: 100,height: 30 }} size="medium" color="primary"  onClick={ () => this.viewPersonal(personal.identity)}>GÖRÜNTÜLE</Button>
              <Button variant="contained" style={{ width: 90,height: 30,marginLeft:10 }} size="medium" color="primary"  onClick={ () => this.editPersonal(personal.identity)}>GÜNCELLE</Button>
              <Button variant="contained" style={{ width: 40,marginLeft:10 }} size="medium" color="primary" onClick={ () => this.deletePersonal(personal.identity)}>SİL</Button>
                </td>               
            </tr>
        )
    }
</tbody>
</Table>
      </div>
      </div>
    );
  }
}

export default withRouter(PersonalSearch);

解决方法

服务调用可能返回空值/未定义，在映射函数之前使用空值检查

检查渲染

this.state.personals?.map

或者在 setState 中更新为空数组

componentDidMount() {
    PersonalService.getPersonals().then((res) => {
        this.setState({
            personals: res.data ?? []  // this might return null 
        });
    });
}

,

    this.setState({ personals: res.data});

很可能 res.data 不是数组。检查您是否从服务器的响应中提取了正确的数据。

,

searchPersonal(identity){
  alert(identity);
  PersonalService.getPersonalById(identity).then( res => {
    this.setState({ personals: res.data});
    console.log('personal => ' + JSON.stringify(this.state.personals));
});

我相信 API 会返回单个对象而不是个人对象数组。因此，在状态更新后，您的 this.state.personals 不再是数组，而是一个对象，然后您收到错误 this.state.personals.map is not a function。

也许，console.log 的输出让你认为 this.state.personals 仍然是一个数组，但是，setState 是异步运行的，所以你从这里的 console.log 得到的是以前的值this.state.personals。

为了得到你想要的，我认为你应该像下面这样更改函数内的代码：

this.setState({ personals: res.data}) 更改为 this.setState({ personals: [res.data]});

,

searchPersonal 按钮只显示一个人的信息

这就是问题所在。如果 searchPersonal 返回单个项目而不是数组并且您执行

this.setState({ personals: res.data});

那么 this.state.personals 将不再是一个数组，导致 this.state.personals.map 抛出错误。

更改您的 searchPersonal 以执行以下操作：

searchPersonal(identity){
  alert(identity);
  PersonalService.getPersonalById(identity).then( res => {
    // Put `res.data` in an array,so that `this.state.personals` is an array with a single item
    this.setState({ personals: [res.data]});
    console.log('personal => ' + JSON.stringify(this.state.personals));
});
}