TypeError：patients.map 不是 React Js 的函数答案

【问题标题】：TypeError: patients.map is not a function React JsTypeError：patients.map 不是 React Js 的函数
【发布时间】：2020-12-09 15:07:54
【问题描述】：

我正在使用 axios 从后端请求一些基本信息，但由于某种原因无法在屏幕上呈现数据。下面是我使用钩子和地图函数返回姓氏的基本 App 组件

import React, { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';
import { Router } from '@reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

import './custom.css'

const App = () => {

    const [patients, setPatient] = useState([])

    useEffect(() => {
        axios.get('http://localhost:5000/api/patient').then(response => {
            console.log(response.data)
            setPatient(response.data)
        })
    }, [])



    return (

        <>
            <div>
                <ul>
                    {patients.map(p => (
                        <li>{p.surname}</li>
                    ))}
                </ul>

            </div>

        </>

    )


}







export default App

当我检查开发工具时，我带回了所有数据

我看不到我的地图功能“不是一个功能”，任何人都可以在这里帮助我吗？我收到以下令人讨厌的错误消息

【问题讨论】：

请添加console.log(response.data)截图。
尝试将? 添加到您的{patients?.map(p => (<li>{p.surname}</li>))} 以查看渲染时是否有数据。如果什么都没发生，那么这意味着您的 patients array 是 empty
嘿拉拉抱歉，当我将 {patients?.map} 放入函数中时，我确实将所有数据返回到数组中
请添加console.log(response.data)截图

标签： reactjs axios

【解决方案1】：

尝试使用 Async 和 Await 进行 API 调用。

useEffect(function() {
   async function fetchPatients() {
      const response = await 
                       fetch('http://localhost:5000/api/patient');
      const json = await response.json();
      setPatient(json.data);
    }
   fetchPatients();
 }, []);

【讨论】：

我认为这可能是 axios 问题 Abu Sufain，您的解决方案解决了这个问题。但我想使用 axios 而不是 fetch :/

【解决方案2】：

试试这个修复：-

import React, { useState, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction';
import { Router } from '@reach/router'
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'

import './custom.css'

const App = () => {

  const [patients, setPatient] = useState([])

  useEffect(() => {
    (async () => {
      try {
        // fetching all patirnts
        let res = await axios.get("http://localhost:5000/api/patient");
        setPatient(res.data);
      } catch (err) {
        console.log(err);
      }
    })();
  }, []);

  return (
    <>
      <div>
        <ul>
          {patients?.map(p => (
            <li>{p.surname}</li>
          ))}
        </ul>
      </div>
    </>
  )
}

export default App

【讨论】：

到目前为止，没有一个 axios 解决方案有效：/
我只是编辑我的代码。试试上面更新的代码
仍然不高兴:(这一定是 axios 的问题，因为我以前从未遇到过这个问题
@Rowandinho 尝试使用 fetch 而不是 axios。
再次编辑它。试一试。如果没有再去，那么现在就去fetch

【解决方案3】：

一个工作代码，适用于将来愚蠢地在这个问题上浪费太多时间的人。数据是嵌套的，这意味着我必须将 Patient 设置为 response.data.data。然后我可以使用 Axios 提取所有必需的信息

   useEffect(() => {
        axios.get('http://localhost:5000/api/patient').then(response => {
            
            setPatient(response.data.data)
        })
    }, [])

【讨论】：