react: typescript system params optimize
1、system-params-service
import paramCache from "../common/param-cache"
import RequestPromise from "./axios-service/RequestPromise"; export const fetchSystemParams = () => {
return RequestPromise({url: '/api/system-parameters'})
}
const parameters = paramCache.getItem("system-params") export const getParam = async (type: string) => {
if (parameters) {
return parameters[type]
} else {
return fetchSystemParams().then(({data}) => {
paramCache.setItem("system-params", data)
return data[type]
})
}
} export const getParamKeys = async (type: string) => {
if (parameters) {
return setParamKeys(parameters)
} else {
return fetchSystemParams().then(({data}) => {
paramCache.setItem("system-params", data)
return setParamKeys(data[type])
})
}
} const setParamKeys = (params: any) => {
const paramKeys: string[] = [];
for (const key in params) {
if (params.hasOwnProperty(key)) {
paramKeys.push(key)
}
}
return paramKeys
}
2、param-type (filter)
import {useState, useEffect} from "react";
import {getParam} from "../../service/system-params-service";
const useParamType = (type: string) => {
const [paramType, setParamType] = useState<any>(null)
useEffect(() => {
getParam(type).then(data => {
setParamType(data);
})
}, [type])
return paramType;
}
export default useParamType;
3、param-select component
import * as React from "react";
import useParamType from "./param-type";
import { useState, useEffect } from "react";
import {Select} from "antd";
import { getParamKeys } from "../../service/system-params-service"; interface ISelectProps {
paramType: string;
selectValue: string;
placeholder?: string;
selectChange: (type: string) => void;
}
const {Option} = Select;
const ParamSelect = (props: ISelectProps) => {
const paramTypeFilter = useParamType(props.paramType)
const [paramKeys, setParamKeys] = useState<string[]>([]) useEffect(() => {
getParamKeys(props.paramType).then(data => {
setParamKeys(data)
})
}, []) return (
<Select
style={{width: 180}}
allowClear={true}
value={props.selectValue}
onChange={props.selectChange}
>
{paramKeys && paramKeys.map((option, index) => {
return <Option value={option}>{paramTypeFilter[option]}</Option>
})}
</Select>
)
}
react: typescript system params optimize的更多相关文章
- react: typescript system params method optimize
import * as _ from "lodash"; import paramCache from "../common/param-cache" impo ...
- react + typescript 学习
react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...
- react typescript jest config (一)
1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...
- React + Typescript领域初学者的常见问题和技巧
React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...
- 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目
一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...
- React + TypeScript + Taro前端开发小结
前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- React + TypeScript:元素引用的传递
React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...
- react+typescript报错集锦<持续更新>
typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...
随机推荐
- 模型压缩一半,精度几乎无损,TensorFlow推出半精度浮点量化工具包,还有在线Demo...
近日,TensorFlow模型优化工具包又添一员大将,训练后的半精度浮点量化(float16 quantization)工具. 有了它,就能在几乎不损失模型精度的情况下,将模型压缩至一半大小,还能改善 ...
- coding++:高并发解决方案限流技术-使用RateLimiter实现令牌桶限流-Demo
RateLimiter是guava提供的基于令牌桶算法的实现类,可以非常简单的完成限流特技,并且根据系统的实际情况来调整生成token的速率. 通常可应用于抢购限流防止冲垮系统:限制某接口.服务单位时 ...
- iOS isEqual
如何重写 hash 方法 一个合理的 hash 方法要尽量让 hash 表中的元素均匀分布,来保证较高的查询性能. 如果两个对象可以被视为同一个对象,那么他们的 hash 值要一样. mattt 在文 ...
- 通过pip控制台查看已安装第三方库版本及最新版本
首先执行[pip --help]查看pip命令: 由Commands知:[pip list]命令查看已安装第三方库,另[pip list --outdated]可查看有新版本的第三方库.
- B - Bound Found POJ - 2566(尺取 + 对区间和的绝对值
B - Bound Found POJ - 2566 Signals of most probably extra-terrestrial origin have been received and ...
- ARM.SchDoc图解
1.基准电压.CR1220电池 2.LCD 3.SPI 4.外部SAM 5.实时时钟 6.EEPROM 7.JTAG 8.复位
- Mysql大数据量问题与解决
今日格言:了解了为什么,问题就解决了一半. Mysql 单表适合的最大数据量是多少? 我们说 Mysql 单表适合存储的最大数据量,自然不是说能够存储的最大数据量,如果是说能够存储的最大量,那么,如果 ...
- vscode如何安装eslint插件 代码自动修复
ESlint:是用来统一JavaScript代码风格的工具,不包含css.html等. 方法和步骤: 通常情况下vue项目都会添加eslint组件,我们可以查看webpack的配置文件package. ...
- ps 命令显示不完整的问题
今天在使用ps命令的时候,无法查找到指定名字的进程ID,仔细查找才发现ps命令查找的结果中进程启动的命令以及参数信息被截断了 问题实例 用户wanng启动了一个进程 wanng_qytrunkcros ...
- "视频播放器"组件:<video-player> —— 快应用组件库H-UI
 <import name="video-player" src="../Common/ui/h-ui/media/c_video_player"> ...