Question

我是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，但是它没有用，有人知道我的代码有什么问题吗？`

Answer 1

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

console.log()来查看其实际内容。

编辑：根据评论，patients对象看起来像

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

因此this.setState()通话需要

this.setState({patients: patients.patient})

Answer 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;

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

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

2 个答案: