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 ...
随机推荐
- 知识图谱与机器学习|KG入门 -- Part2 建立知识图谱
介绍 在本系列前面两篇文章中我一直在讨论Data Fabric,并给出了一些关于Data Fabric中的机器学习和深度学习的概念.并给出了我对Data Fabric的定义: Data Fabric是 ...
- R与金钱游戏:美股与ARIMA模型预测
似乎突如其来,似乎合情合理,我们和巴菲特老先生一起亲见了一次,又一次,双一次,叒一次的美股熔断.身处历史的洪流,渺小的我们会不禁发问:那以后呢?还会有叕一次吗?于是就有了这篇记录:利用ARIMA模型来 ...
- Secret Milking Machine POJ - 2455 网络流(Dinic算法---广搜判断+深搜增广)+时间优化+二分
题意: 第一行输入N M C ,表示从1到N有M条无向边,现在要从1走到N 走C次完全不同的路径,求最长边的最小值.下面M行是从a点到b点的距离. 建图: 题上说从两点之间可以有多条边,问的是从1~N ...
- PIGS POJ - 1149网络流(最短增广路---广搜) + 建图
题意: 第一行输入m和n,m是猪圈的数量,n是顾客的数量,下面n行 第 i+1行表示第i个顾客 , 输入第一个数字表示有几把猪圈的钥匙,后面输入对应的猪圈,最后一个数字输入顾客想买几头猪. 建图: 设 ...
- SQL Server中创建sde数据库
在ArcCatalog或者ArcMap中打开ArcToolBox工具箱. 在工具箱中,找到创建企业级地理数据库工具,依次为数据管理工具→地理数据库管理→创建企业级地理数据库,如图所示. 双击打开创建企 ...
- c++中的多态机制
目录 1 背景介绍 2 多态介绍 2-1 什么是多态 2-2 多态的分类 2-3 动态多态成立的条件 2-4 静态联编和动态联编 2-5 动态多态的实现原理 2-6 虚析构函数 ...
- Kitty-Cloud环境准备
项目地址 https://github.com/yinjihuan/kitty-cloud 开发工具 开发工具目前对应的都是我本机的一些工具,大家可以根据自己平时的习惯选择对应的工具即可. 工具 说明 ...
- [noip模拟]改造二叉树<LIS>
1.改造二叉树 [题目描述] 小Y在学树论时看到了有关二叉树的介绍:在计算机科学中,二叉树是每个结点最多有两个子结点的有序树.通常子结点被称作“左孩子”和“右孩子”.二叉树被用作二叉搜索树和二叉堆.随 ...
- JS烟花案例
html代码部分 <!DOCTYPE html> <!-- * @Descripttion: * @version: * @Author: 小小荧 * @Date: 2020-03- ...
- storm学习初步
本文根据自己的了解,对学习storm所需的一些知识进行汇总,以备之后详细了解. maven工具 参考书目 Maven权威指南 官方文档 Vagrant 分布式开发环境 博客 storm 参考书目 Ge ...