zoukankan      html  css  js  c++  java
  • 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={{ 180}}
                allowClear={true}
                value={props.selectValue}
                onChange={props.selectChange}
             >
                 {paramKeys && paramKeys.map((option, index) => {
                     return <Option value={option}>{paramTypeFilter[option]}</Option>
                 })}
             </Select>
         )
    }
  • 相关阅读:
    在PHP语言中使用JSON
    PHP中生成json信息的方法
    Oracle 11g数据库详细安装步骤图解
    spring data jpa
    missing artifact com.oracle:ojdbc14:jar:10.2.0.2.0解决办法
    HDU 2841 Visible Trees
    LightOJ 1348 Aladdin and the Return Journey
    FZU 2082 过路费
    BZOJ 1036: [ZJOI2008]树的统计Count
    BZOJ 2243: [SDOI2011]染色
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/11272198.html
Copyright © 2011-2022 走看看