界首工程建设信息网站,图书馆门户网站建设总结,十大房产网站排行榜,joomla 做的网站一、介绍 列表页是常用的功能#xff0c;从后端获取列表数据#xff0c;刷新到页面上。开发列表页需要考虑以下技术要点:1.如何翻页#xff1b;2.如何进行内容搜索#xff1b;3.何时进行页面刷新。
二、使用教程
1.user-service
根据用户id获取用户列表#xff0c;返回…一、介绍 列表页是常用的功能从后端获取列表数据刷新到页面上。开发列表页需要考虑以下技术要点:1.如何翻页2.如何进行内容搜索3.何时进行页面刷新。
二、使用教程
1.user-service
根据用户id获取用户列表返回的state包括列表响应加载状态请求错误等信息。
const useFetchUserList () {// useRequest Hookconst [state, doRequest] useRequest();// useAuth hookconst [user] useAuth(); // 发起请求const fetch (userId, page, pageSize) doRequest(http://vicyor.com/user/userId, {page:page,pageSize:pageSize},{authorization:user.token}, POST );// 返回结果return {state, fetch}
}
demo
export const ListPage () {const [search, setSearch] useState();const [page, setPage] useState(1); const [pageSize, setPageSize] useState(10);const [state, fetch] useFetchUserList();const handleSearch keyword fetch(keyword, page, pageSize);useEffect( () {fetch(, 1, pageSize);},[]) return (divh2User List/h2Input.Searchvalue{search}onChange{e setSearch( e.target.value )}onSearch{handleSearch}/TabledataSource{state.data}columns{getColumns()}rowKeyidloading{state.isLoading}error {state.error}pagination{true}/Paginationcurrent{page}total{state.total}update {setPage, setPageSize}//div/);}
2. province-city-service
省份和城市服务选择省份后选择对应的城市
const useProvinceAndCity () {const [fetchProvince, provincesState] useRequest(http://vicyor.com/province/list,{},{},GET);const [fetchCitys, citysState] useRequest(http://vicyor.com/ province /cityes, {}, {}, POST);return {fetchProvince, fetchCitys, provincesState, citysState};}
demo const CitySelector () {const [selectedProvince, setSelectedProvince] useState();const [selectedCity, setSelectedCity] useState();const [fetchProvince, fetchCitys, provincesState, citysState] useProvinceAndCitys();// 初始加载所有省份useEffect(() {fetchProvince();},[])const handleProvinceChange (e) {setSelectedProvince(e.target.value);// 加载所有城市fetchCitys(selectedProvince);};const handleCityChange (e) {setSelectedCity(e.target.value);};return (divselect value{selectedProvince} onChange{handleProvinceChange}option value 请选择省份optionprovincesState.res provincesState.res.map(province option value {province.name}{province.name}/option)/selectselect value{selectedCity} onChange{handleCityChange}option value请选择城市/optioncitysState.res citysState.res.map(city option value {city.name}{city.name}/city/select/div);
};
