字段数据处理

github: github.com/easy-page/e…

文档站官网：easy-page.github.io/easy-page-d…

文档站 github: github.com/easy-page/e…

下方以 nodeUtil.createField 为例，其余 API 的数据处理类似，详情可见 API 文档。

在表单场景中，往往存储到后端的数据结构，和我们 UI 页面展示的结构有所差异，我们避免不了要对数据做处理。

提交数据时，处理成后端所需要的值。=> postProcess
返回数据时，处理成页面所要展现的值。=> preProcess

示例

下述以年龄字段为例，来展示数据处理过程：

export const age = nodeUtil.createField<
  string,
  {
    age: string;
  }
>('age', '年龄', {
  value: '',
  required: true,
  /** 提交前，将数据处理成数字 */
  postprocess({ value }) {
    return { ['people.age']: value ? Number(value) : 0 };
  },
  /** 数据回显时，从后端数据中将 age 取出，并转换成字符串 */
  preprocess({ defaultValues, pageProps }) {
    return `${defaultValues.people?.age}`;
  },
});

基于上述示例：

我们通过postprocess在提交数据前将数据处理成了数字，并基于后端的协议约定，赋值给了:people.age
我们通过 preprocess 在获取后端数据后取出，并返回值给 age 字段。

defaultValues 来源于 EasyPage 组件的配置里，只需要如下传递即可:

const BasicUse = () => {
  return (
    <EasyPage
      {...pageInfo}
      defaultValues={{
        people: {
          age: 1,
        },
      }}
      /** 按需加载表单所需组件 * */
      components={DEFAULT_COMPONENTS}
      pageType="form"
    />
  );
};

这里的 defaultValues 可从后端获取后，放到此处。

Demo 演示

效果如下见：easy-page.github.io/easy-page-d…

如上 demo 所演示，已经将默认值回填，点击提交，可获得数据结构如下：

{ people: { age: 1 } }

注意，defaultValues 会在组件加载时就解析，但一般我们获取默认值时是异步的，在这之前解析了之后，等结果回来表单就不会刷新，不回填默认值。我们有两种方式：

在未获取到数据前，使得页面处于 loading 中，不加载 EasyPage 组件：


const BasicUse = () => {
  const [data, setData] = useState<{ data: any; loading: boolean }>({
    data: {},
    loading: true,
  });

  useEffect(() => {
    /** 模拟加载数据 */
    const loadData = async () => {
      // setData({ data: data.data, loading: true });
      await sleep(3000);
      const result = await Promise.resolve({
        people: { age: 1 },
      });
      setData({ data: result, loading: false });
    };
    loadData();
  }, []);
  console.log('data.loading:', data.loading);
  if (data.loading) {
    return <Spin />;
  }

  return (
    <EasyPage
      {...pageInfo}
      defaultValues={data.data}
      /** 按需加载表单所需组件 * */
      components={DEFAULT_COMPONENTS}
      pageType="form"
      /** 设置 key，异步回来后刷新组件 */
    />
  );
};

给 EasyPage 设置 key，获取到数据后刷新一下即可 key 即可，会重新渲染整个表单。

import { DEFAULT_COMPONENTS, EasyPage } from '@easy-page/antd-ui';
import React, { useEffect, useState } from 'react';
import '../common/style';
import { pageInfo } from './pageInfo';

const BasicUse = () => {
  const [data, setData] = useState({
    data: {},
    formKey: `${new Date().getTime()}`,
  });

  useEffect(() => {
    /** 模拟加载数据 */
    const loadData = async () => {
      const data = await Promise.resolve({
        people: { age: 1 },
      });
      setData({ data, formKey: `${new Date().getTime()}` });
    };
    loadData();
  }, []);

  return (
    <EasyPage
      {...pageInfo}
      defaultValues={data.data}
      /** 按需加载表单所需组件 * */
      components={DEFAULT_COMPONENTS}
      pageType="form"
      /** 设置 key，异步回来后刷新组件 */
      key={data.formKey}
    />
  );
};

export default BasicUse;

【EasyPage 教你写表单06】- 字段数据处理

字段数据处理

示例

Demo 演示