TypeError：this.state.patients.map 不是函数

Posted 2023-03-28

【中文标题】TypeError：this.state.patients.map 不是函数

【英文标题】：TypeError: this.state.patients.map is not a function

【发布时间】：2019-01-03 05:00:18

【问题描述】：

我是 react js 的新手，我正在学习创建一个 React 应用程序，但我遇到了映射函数的问题：

这是我的请求以及我尝试呈现数据的方式：

class Patients extends Component 
  constructor(props) 
    super(props)
    this.state = 
      patients: []
    
  
  componentDidMount() 
    api.getPatients()
      .then( patients => 
        console.log( patients)
        this.setState(
          patients:  patients
        )
      )
      .catch(err => console.log(err))
  
  render()                 
    return (
      <div className=" Patientss">
        <h2>List of Patient</h2>
        this.state.patients.map((c, i) => <li key=i>c.name</li>)
      </div>
    );
  


export default Patients;

这里是我的 api 调用

import axios from 'axios';

const service = axios.create(
  baseURL: process.env.NODE_ENV === 'production' ? '/api' : 'http://localhost:3000/patient',
);

const errHandler = err => 
  console.error(err);
  throw err;
;

export default 
    service: service,
    
    getPatients() 
      return service
        .get('/')
        .then(res => res.data)
        .catch(errHandler);
    ,
    

我收到以下错误： TypeError: this.state.patients.map is not a function

我也尝试过使用 slice，但是没有用，有人知道我的代码有什么问题吗？`

【问题讨论】：

您确定服务器响应中有数据吗？你能告诉我们这个console.log（患者）给出了什么吗？

… ​ count: 24 ​ patient: Array(24) [ …, …, …, … ] ​ <prototype>: Object …

@RiaAnggraini 是一个对象，在 setState 中使用 patients.patient。

@MayankShukla 是的，没错，谢谢，我犯了愚蠢的错误

【参考方案1】：

根据症状（呵呵），您在api.getPatients() 中获得的patients 对象不是数组。

console.log() 看看它到底是什么。

编辑：基于 cmets，patients 对象看起来像

  count: 24,
  patient: [...],

所以this.setState() 调用需要是

this.setState(patients: patients.patient)

【讨论】：

这里是控制台结果… ​ count: 24 ​ patient: Array(24) [ …, …, …, … ] ​ <prototype>: Object …

@RiaAnggraini 好的。用基于此的解决方案更新了我的答案。

它的作品，非常感谢，我从今天早上开始一直在寻找问题，谢谢:)

【参考方案2】：

你也可以做这样的事情作为条件渲染。它将检查 this.state.patient 是否存在，那么只有它会继续调用 this.state.patients.map 函数。它还可以确保您以后不会因为错误的响应而收到任何错误。

我更新了您的患者代码示例。

class Patients extends Component 
  constructor(props) 
    super(props)
    this.state = 
      patients: []
    
  
  componentDidMount() 
    api.getPatients()
      .then( patients => 
        console.log( patients)
        this.setState(
          patients:  patients
        )
      )
      .catch(err => console.log(err))
  
  render()                 
    return (
      <div className=" Patientss">
        <h2>List of Patient</h2>
         this.state.patients && this.state.patients.map((c, i) => <li key=i>c.name</li>)
      </div>
    );
  


export default Patients;

我希望它有所帮助。谢谢！！