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. PyTorch 实战-张量

    Numpy 是一个非常好的框架,但是不能用 GPU 来进行数据运算. Numpy is a great framework, but it cannot utilize GPUs to acceler ...

  2. [noip模拟]食物中毒<暴搜+状压优化>

    问题描述 Bqc经过一段时间的研究发现,要解这种毒需要一种特殊的药物.不幸的是,这种药物在 市面上不存在,没有办法Bqc只好亲自制得这种药物.它含有M种化学物质A1,A2,…,AM.现 在Bqc的手上 ...

  3. Openresty+Lua+Kafka实现日志实时采集

    简介 在很多数据采集场景下,Flume作为一个高性能采集日志的工具,相信大家都知道它.许多人想起Flume这个组件能联想到的大多数都是Flume跟Kafka相结合进行日志的采集,这种方案有很多他的优点 ...

  4. 一位萌新Google冲浪的开始

    这一切的开始可能都来源于对 百度 各方面的不满吧(确实不咋滴) 于是开始对Google感冒,上必应https://cn.bing.com/去搜了下“国内如何上Google”,上面也是众说纷纭,莫衷一是 ...

  5. 牛客寒假基础集训营 | Day1 D-hanayo和米饭

    D-hanayo和米饭 题目描述 hanayo很喜欢吃米饭. 有一天,她拿出了 nnnnnnnnn 个碗,第一个碗装了 111111111 粒米饭,第二个碗装了 222222222 粒米饭,以此类推, ...

  6. Java 为 Excel 中的行设置交替背景色

    在制作Excel表格时,通过将数据表中上下相邻的两行用不同的背景色填充,可以使各行的数据看起来更清楚,避免看错行,同时也能增加Excel表格的美观度.本文将介绍如何在Java程序中为 Excel 奇数 ...

  7. python基本知识点if、while、等等

    给予Python的相关知识点: 主要是对于基本语句的相关使用if else while for等先关的应用,以及步骤如下: 尝试编程如下:还有就是对于 import math import rando ...

  8. go 递归函数

    一.什么是递归函数? 当一个函数在其函数体内调用自身,则称之为递归. 二.引用经典例子:斐波那切数列 package main import "fmt" func main(){ ...

  9. Linux网络安全篇,认识防火墙(一)

    一.概念 防火墙分为软件防火墙和硬件防火墙.我们的主要讨论范围为软件防火墙. 软件防火墙又分为网络型和单一型的管理. 1.单一主机型防火墙 (1)数据包过滤型的Netfilter (2)依据服务软件程 ...

  10. Web Scraper 高级用法——使用 CouchDB 存储数据 | 简易数据分析 18

    这是简易数据分析系列的第 18 篇文章. 利用 web scraper 抓取数据的时候,大家一定会遇到一个问题:数据是乱序的.在之前的教程里,我建议大家利用 Excel 等工具对数据二次加工排序,但还 ...