React通过axios拿到数据后，使用hooks，通过map函数对列表进行渲染

65 阅读 0 评论 43 点赞

我是靠谱客的博主典雅超短裙，最近开发中收集的这篇文章主要介绍React通过axios拿到数据后，使用hooks，通过map函数对列表进行渲染，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

导入hooks，导入你封装的http模块，引入样式

import React, { useEffect, useState } from 'react'
import {http} from '@/API/'
import './index.scss'

默认导出一个函数组价，并使用hooks对数据进行渲染

  const [askList,setAskLike] = useState([])
  useEffect(()=>{
    const getAskList = async ()=>{
      const res = await http.get('/home/news')
      //当请求成功的时候，赋给askList一个res.body的值
      if(res.status===200){
        setAskLike(res.body)
      }
    }
    //在useEffect中直接调用
    getAskList()
  },[])

对数据render渲染

  return (
    <div className='ask-container'>
      <div className='title'>
        最新咨询
      </div>
        //通过map函数对数据进行渲染
      {askList.map(item=>(
        <div className='showinfo' key={item.id}>
          <div className='askPic'>
            <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
          </div>
          <div className='askInfo'>
            <p>{item.title}</p>
            <div className='askorg'>
              <span>{item.from}</span>
              <span>{item.date}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

总代码

import React, { useEffect, useState } from 'react'
import {http} from '@/API/'
import './index.scss'
export default function Ask() {
  const [askList,setAskLike] = useState([])
  useEffect(()=>{
    const getAskList = async ()=>{
      const res = await http.get('/home/news')
      if(res.status===200){
        setAskLike(res.body)
      }
    }
    getAskList()
  },[])
  return (
    <div className='ask-container'>
      <div className='title'>
        最新咨询
      </div>
      {askList.map(item=>(
        <div className='showinfo' key={item.id}>
          <div className='askPic'>
            <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
          </div>
          <div className='askInfo'>
            <p>{item.title}</p>
            <div className='askorg'>
              <span>{item.from}</span>
              <span>{item.date}</span>
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}