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的更多相关文章

  1. react: typescript system params method optimize

    import * as _ from "lodash"; import paramCache from "../common/param-cache" impo ...

  2. react + typescript 学习

    react,前端三大框架之一,也是非常受开发者追捧的一门技术.而 typescript 是 javascript 的超集,主要特点是对 类型 的检查.二者的结合必然是趋势,不,已经是趋势了.react ...

  3. react typescript jest config (一)

    1. initialize project create a folder project Now we'll turn this folder into an npm package. npm in ...

  4. React + Typescript领域初学者的常见问题和技巧

    React + Typescript领域初学者的常见问题和技巧 创建一个联合类型的常量 Key const NAME = { HOGE: "hoge", FUGA: "f ...

  5. 【每天学一点-04】使用脚手架搭建 React+TypeScript+umi.js+Antd 项目

    一.使用脚手架搭建项目框架 1.首先使用脚手架搭建React项目(React+TypeScript+Umi.js) 在控制台输入命令:yarn create @umijs/umi-app 2.引入An ...

  6. React + TypeScript + Taro前端开发小结

    前言 项目到一段落,先来记录一下,本文以前端新手的角度记录React.TypeScript.Taro相关技术的开发体验以及遇到的问题和解决方法. 之前总说要学React(这篇博客:代码使我头疼之Rea ...

  7. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

  8. React + TypeScript:元素引用的传递

    React 中需要操作元素时,可通过 findDOMNode() 或通过 createRef() 创建对元素的引用来实现.前者官方不推荐,所以这里讨论后者及其与 TypeScript 结合时如何工作. ...

  9. react+typescript报错集锦<持续更新>

    typescript报错集锦 错误:Import sources within a group must be alphabetized.tslint(ordered-imports) 原因:impo ...

随机推荐

  1. ICML 2019论文录取Top100:谷歌霸榜

    [导读]人工智能顶级会议ICML 2019发布了今年论文录取结果.提交的3424篇论文中,录取了774篇,录取率为22.6%,较去年有所降低.从录取论文数量来看,谷歌成为今年最大赢家,紧随其后的是MI ...

  2. IEnumerable和IQueryable在使用时的区别

    最近在调研数据库查询时因使用IEnumerable进行Linq to entity的操作,造成数据库访问缓慢.此文讲述的便是IEnumerable和IQueryable的区别. 微软对IEnumera ...

  3. Java面试金典

    1,将构造函数声明为私有的作用 构造函数私有化,保证类以外的地方不能直接实例化该类,这种情况下,要创建这个类的实例,只能提供一个公共静态方法,像工厂方法模式,由于构造函数私有化,不能被继承. 2,在t ...

  4. 从养孩子谈谈 IO 模型(一)

    同步/异步.阻塞/非阻塞 说的是一回事儿吗? 同步/异步.阻塞/非阻塞 你能通俗易懂的讲清楚吗? Java 中的 BIO.NIO.AIO 你了解吗? Socket 编程你还会吗? Linux 操作系统 ...

  5. 微信小程序wx:for隐藏遍历的最后一个元素

    微信小程序开发时有时会需要从wx:for遍历的元素中选取最后一个来进行相关操作,以下方法以隐藏最后一个元素为例 index==list.length-1 通过获取列表的总长度减一来得到最后一个元素是最 ...

  6. Vulnhub JIS-CTF-VulnUpload靶机渗透

    配置问题解决 参考我的这篇文章https://www.cnblogs.com/A1oe/p/12571032.html更改网卡配置文件进行解决. 信息搜集 找到靶机 nmap -sP 192.168. ...

  7. NS网络仿真,小白起步版,双节点之间的模拟仿真(基于TCP和FTP流)

    set ns [new Simulator] set tracefd [open one.tr w] #开启跟踪文件,记录分组传送的过程 $ns trace-all $tracefd set namt ...

  8. 第一章 AT&T

    1.一个公司(企业)越庞大,就越危险:越复杂,就越濒临坍塌:快速发展的同时,也埋下了隐患. 2.再庞大的企业也不可能永久站立,下个十年谁也说不准谁会在浪潮之巅. 3.一个人能走多远,往往取决于他能看多 ...

  9. Java Array 常见报错ArrayIndexOutOfBoundsException NullPointerException

    本文介绍array报错, 数组索引越界异常: ArrayIndexOutOfBoundsException, 空指针:NullPointerException package myArray; /* ...

  10. "多行文本"组件:<multi> —— 快应用组件库H-UI

     <import name="multi" src="../Common/ui/h-ui/text/c_text_multi"></impo ...