react 调用api实现数据列表的渲染

2022-02-23 20:35:38 阅读：274 来源： 互联网

标签：axios const 渲染 react api useState import page

首先建一个项目（vite构建）

yarn create vite Topics-Date --template react

封装axios

npm i axios //在该文件夹下下载zxios

新建utils/request.js

import axios from 'axios'

const instance = axios.create({
    baseURL:"https://cnodejs.org/api/v1"
})

export default instance

新建 src/api/Topics.js 设置请求api

import axios from 'axios'

const instance = axios.create({
    baseURL:"https://cnodejs.org/api/v1"
})

export default instance

新建component/TopicsList.jsx 对页面进行编写

import {useEffect,useState} from 'react'
import { GET_TOPICS } from '../api/Topics'

export default function TopicsList() {
   const [topics,setTopics] = useState([])
   const [page,setPage] = useState(1)
   const [limit,setLimit] = useState(10)
   //创建一个请求函数
   const getTopic = async (params) =>{
       const res = await GET_TOPICS(params)
       setTopics(res.data.data)
   }

   //请求函数
   useEffect(()=>{
       getTopic({page,limit})
   },[page,limit])

  return (
    <div>
     {
         topics.map(topic => <div key={topic.id}>{topic.title}</div>)
     }
      <button onClick={()=> setPage(page-1)} disabled={page==1}>上一页</button>
      <button onClick={()=> setPage(page+1)} disabled={page==topics.length-1}>下一页</button>


      <select value = {limit} onChange={(e)=> setLimit(+e.target.value)}>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
        <option value="40">40</option>
    </select>
    </div>
  
  )
}

在App.jsx 中引入列表组件

import { useState } from 'react'
import TopicsList from './component/TopicsList'


function App() {
  const [status, setStatus] = useState(true)
  if(status){
    return (
      <div className="App">
             <TopicsList></TopicsList>
      </div>
    )
  }

  return (
    <div className="App">

    </div>
  )
}

export default App

可实现对数据的渲染以及上一页下一页的转化以及显示几条的设置
如图效果

在这里插入图片描述

标签：axios,const,渲染,react,api,useState,import,page
来源： https://blog.csdn.net/weixin_48864616/article/details/123098228

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 调用api实现数据列表的渲染