TS知识点

最新推荐文章于 2024-07-20 23:54:17 发布

阿玉学前端

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量120

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_64678150/article/details/126901389

版权

import React,{useEffect,useState} from 'react'
import axios from 'axios'
import './home.css'
export default function Home() {
    interface itemlist{
        id:number,
        title:string,
        word:string,
        img:string,
        price:number
    }
    const [list,setlist]=useState<itemlist[]>()
    const getlist=async()=>{
        const res=await axios.get('/api/getlist')
        setlist(res.data.list)
    }
    useEffect(()=>{
        getlist()
    },[])
  return (
    <div className='home'>
        {
            list?.map(v=>{
                return (
                    <dl key={v.id}>
                        <dt><img src={v.img} alt="" /></dt>
                        <dd>
                            <h3>{v.title}</h3>
                            <p>{v.word}</p>
                        </dd>
                    </dl>
                )
            })
        }
    </div>
  )
}