导入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>
)
}