React通过axios调用服务接口渲染无状态组件详解

一、axios

概念&＃xff1a;Axios 是一个基于 promise 的 HTTP 库&＃xff0c;可以用在浏览器和 node.js 中。(个人理解就是ajax&＃xff0c;用来请求和响应数据)

安装命令&＃xff1a;yarn add axios 或者 npm install axios

二、无状态组件

概念&＃xff1a;无状态组件顾名思义就是没有状态的组件,如果一个组件不需要管理 state 只是纯的展示,那么就可以定义成无状态组件

&＃xff08;个人理解就是只有reder和dom就可以改变为无状态组件&＃xff09;

三、代码实例

请先学习Redux的使用&＃xff1a;https://blog.csdn.net/qq_17025903/article/details/102628320

ShowList.js

import React,{ Component } from &＃39;react&＃39;;
import &＃39;antd/dist/antd.css&＃39;; // or &＃39;antd/dist/antd.less&＃39;
import { Input,Button,List } from &＃39;antd&＃39;;
import store from &＃39;../store&＃39;;
import ShowListUI from &＃39;../UI/ShowListUI&＃39;;
import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM,INIT_LIST_ACTION} from &＃39;../store/actionTypes&＃39;;
import {getInputChangeAction,getAddItemAction,getDeleteItemAction,initListAction} from &＃39;../store/actionCreators&＃39;;
import axios from &＃39;axios&＃39;;//全局数据
// const data &＃61; [
// &＃39;Racing car sprays burning fuel into crowd.&＃39;,
// &＃39;Japanese princess to wed commoner.&＃39;,
// &＃39;Australian walks 100km after outback crash.&＃39;,
// &＃39;Man charged over missing wedding girl.&＃39;,
// &＃39;Los Angeles battles huge wildfires.&＃39;,
// ];class showList extends Component{constructor(props){super(props);//创建数据this.state&＃61;store.getState();this.handleInputChange&＃61;this.handleInputChange.bind(this);this.handleStoreChange&＃61;this.handleStoreChange.bind(this);this.handleBtnClick&＃61;this.handleBtnClick.bind(this);this.handleItemDelete&＃61;this.handleItemDelete.bind(this);//监听返回组件的数据&＃xff0c;并且同步数据。store.subscribe(this.handleStoreChange);}render(){return()}// render(){// return(//

antdList.js

import React from &＃39;react&＃39;;
import ShowList from &＃39;../components/ShowList&＃39;;export default function() {return (

创建UI文件夹&＃xff0c;拆分dom为ShowListUI.js

redux store 为index.js

//store 存数据传递reducer处理
import {createStore} from &＃39;redux&＃39;;
import reducer from &＃39;./reducer&＃39;;import React from "react";
//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 为 redux devtools工具配置
const store&＃61;createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());export default store;


reducer.js


import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM,INIT_LIST_ACTION} from &＃39;../store/actionTypes&＃39;;
import TodoItem from "&＃64;/components/TodoItem";
import React from "react";
//reducer可以接收state但是不能修改state
//处理数据
//defaultState store默认值
const defaultState&＃61;{inputValue:&＃39;123&＃39;,list:[1,2]
}
//state上一次存储的数据
//action传过来改变的
export default (state&＃61;defaultState,action)&＃61;>{console.log(state,action);if(action.type&＃61;&＃61;&＃61;CHANGE_INPUT_VALUE){//复制一份数据const newState&＃61;JSON.parse(JSON.stringify(state))//修改newState.inputValue&＃61;action.value;return newState;}//添加到列表if(action.type&＃61;&＃61;&＃61;ADD_TODO_ITEM){const newState&＃61;JSON.parse(JSON.stringify(state))newState.list.push(newState.inputValue);newState.inputValue&＃61;&＃39;&＃39;;return newState;}//删除点击列表内容if(action.type&＃61;&＃61;&＃61;DELETE_TODO_ITEM){const newState&＃61;JSON.parse(JSON.stringify(state))newState.list.splice(action.index,1);return newState;}if(action.type&＃61;&＃61;&＃61;INIT_LIST_ACTION){//复制一份数据const newState&＃61;JSON.parse(JSON.stringify(state))newState.list2&＃61;[ ...newState.list];action.data.map((item)&＃61;>{newState.list2.push(item.age);})newState.list&＃61;newState.list2;return newState;}return state;
}

actionTypes.js

//定义常量
export const CHANGE_INPUT_VALUE&＃61;&＃39;change_input_value&＃39;;
export const ADD_TODO_ITEM&＃61;&＃39;add_todo_item&＃39;;
export const DELETE_TODO_ITEM&＃61;&＃39;delete_todo_item&＃39;;
export const INIT_LIST_ACTION&＃61;&＃39;init_list_action&＃39;;


actionCreators.js

import {CHANGE_INPUT_VALUE,ADD_TODO_ITEM,DELETE_TODO_ITEM,INIT_LIST_ACTION} from &＃39;../store/actionTypes&＃39;;export const getInputChangeAction&＃61;(value)&＃61;>({type:CHANGE_INPUT_VALUE,value:value
});
export const getAddItemAction&＃61;()&＃61;>({type:ADD_TODO_ITEM
});
export const getDeleteItemAction&＃61;(index)&＃61;>({type:DELETE_TODO_ITEM,index:index
});export const initListAction&＃61;(data)&＃61;>({type:INIT_LIST_ACTION,data:data
});


请求的接口为springboot的 queryAllUserInfo

四、完成结果

list:[1,2]数组添加了请求服务的age&＃xff0c;并且可以点击删除。