实现场景：

实现表格里的过滤

存在的问题：

报错 TypeError: filter.map is not a function

当前方案：

App.tsx

import React, { useEffect, useState } from 'react';

import '@fortawesome/fontawesome-free/css/all.css';
import '@fortawesome/fontawesome-free/css/v4-shims.css';

import 'amis/lib/themes/cxd.css';
import 'amis/lib/helper.css';
import 'amis/sdk/iconfont.css';

import axios from 'axios';
import copy from 'copy-to-clipboard';

import {render as renderAmis, ToastComponent, AlertComponent} from 'amis';
import {Switch, alert, confirm, toast} from 'amis-ui';
import { HashRouter, Routes, Route, useParams } from 'react-router-dom';

// amis 环境配置
const env = {
  // 下面三个接口必须实现
  fetcher: ({
    url, // 接口地址
    method, // 请求方法 get、post、put、delete
    data, // 请求数据
    responseType,
    config, // 其他配置
    headers // 请求头
  }: any) => {
    config = config || {};
    config.withCredentials = true;
    responseType && (config.responseType = responseType);

    if (config.cancelExecutor) {
      config.cancelToken = new (axios as any).CancelToken(
        config.cancelExecutor
      );
    }

    config.headers = headers || {};

    if (method !== 'post' && method !== 'put' && method !== 'patch') {
      if (data) {
        config.params = data;
      }
      return (axios as any)[method](url, config);
    } else if (data && data instanceof FormData) {
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'multipart/form-data';
    } else if (
      data &&
      typeof data !== 'string' &&
      !(data instanceof Blob) &&
      !(data instanceof ArrayBuffer)
    ) {
      data = JSON.stringify(data);
      config.headers = config.headers || {};
      config.headers['Content-Type'] = 'application/json';
    }

    return (axios as any)[method](url, data, config);
  },
  isCancel: (value: any) => (axios as any).isCancel(value),
  copy: (content: string) => {
    copy(content);
    toast.success('内容已复制到粘贴板');
  }
 

...

 class SearchPortResultComponent extends React.Component<any, any> {
  render() {
    return renderAmis(
      // 这里是 amis 的 Json 配置。
    {
      "type": "page",fil
      "title": "漏洞平台",
      "body": [
        {
          "id": "u:6028df037ff1",
          "type": "crud2",
          "mode": "table2",
          "dsType": "api",
          "syncLocation": true,
          "primaryField": "id",
          "loadType": "pagination",
          "api": {
            "url": "http://127.0.0.1:8080/searchPort",
            "method": "get"
          },
          "headerToolbar": [
            {
              "type": "flex",
              "direction": "row",
              "justify": "flex-start",
              "alignItems": "stretch",
              "style": {
                "position": "static"
              },
              "items": [],
              "id": "u:d09e5473d5a3"
            }
          ],
          "footerToolbar": [
            {
              "type": "flex",
              "direction": "row",
              "justify": "flex-start",
              "alignItems": "stretch",
              "style": {
                "position": "static"
              },
              "items": [
                {
                  "type": "container",
                  "align": "right",
                  "body": [
                    {
                      "type": "pagination",
                      "behavior": "Pagination",
                      "layout": [
                        "total",
                        "perPage",
                        "pager"
                      ],
                      "perPage": 10,
                      "perPageAvailable": [
                        10,
                        20,
                        50,
                        100
                      ],
                      "align": "right",
                      "id": "u:0d0b53e6865d"
                    }
                  ],
                  "wrapperBody": false,
                  "style": {
                    "flexGrow": 1,
                    "flex": "1 1 auto",
                    "position": "static",
                    "display": "flex",
                    "flexBasis": "auto",
                    "flexDirection": "row",
                    "flexWrap": "nowrap",
                    "alignItems": "stretch",
                    "justifyContent": "flex-end"
                  },
                  "id": "u:10cefc1c5a4d"
                }
              ],
              "id": "u:bb1e92cb5c28"
            }
          ],
          "columns": [
            {
              "type": "tpl",
              "title": "UUID",
              "name": "uuid",
              "id": "u:1801f965e83a",
              "placeholder": "-"
            },
            {
              "type": "tpl",
              "title": "IP",
              "name": "ip",
              "id": "u:0e63f3765a05"
            },
            {
              "type": "tpl",
              "title": "Port",
              "name": "port",
              "id": "u:1918d7c084a6"
            },
            {
              "type": "tpl",
              "title": "Protocol",
              "name": "protocol",
              "id": "u:6b3d55c2867a"
            },
            {
              "type": "tpl",
              "title": "Product",
              "name": "product",
              "id": "u:6ff2157162e2"
            },
            {
              "type": "tpl",
              "title": "Name",
              "name": "name",
              "id": "u:249a76da8902"
            },
            {
              "type": "tpl",
              "title": "Version",
              "name": "version",
              "id": "u:663959a8ec43"
            },
            {
              "type": "tpl",
              "title": "Status",
              "name": "status",
              "id": "u:663959a8ec43"
            }
          ],
          "editorSetting": {
            "mock": {
              "enable": true,
              "maxDisplayRows": 5
            }
          },
          "loadDataOnce": true,
          "filter": {
            "type": "form",
            "title": "条件查询",
            "mode": "inline",
            "columnCount": 3,
            "clearValueOnHidden": true,
            "behavior": [
              "SimpleQuery"
            ],
            "body": [
              {
                "name": "uuid",
                "label": "UUID",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:3e916b68bb33"
              },
              {
                "name": "ip",
                "label": "IP",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:d313e501fcbc"
              },
              {
                "name": "port",
                "label": "Port",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:ec90d3c9ece3"
              },
              {
                "name": "product",
                "label": "Product",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:80e9a4a9767a"
              },
              {
                "name": "name",
                "label": "Name",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:c627e0eff3b4"
              },
              {
                "name": "status",
                "label": "Status",
                "type": "input-text",
                "size": "full",
                "required": false,
                "behavior": "SimpleQuery",
                "id": "u:8e15bcf1d047"
              }
            ],
            "actions": [
              {
                "type": "reset",
                "label": "重置",
                "id": "u:1198e4e87c82"
              },
              {
                "type": "submit",
                "label": "查询",
                "level": "primary",
                "id": "u:97aaa2f150e5"
              }
            ],
            "id": "u:9718804232c0",
            "feat": "Insert"
          }
        }
      ],
      "id": "u:3050750fd481",
      "asideResizor": false,
      "pullRefresh": {
        "disabled": true
      },
      "regions": [
        "body",
        "header",
        "aside"
      ],
      "aside": [
        {
          "type": "grid",
          "columns": [],
          "id": "u:9cb4ea7f0cbc"
        },
        ...
        }
      ],
      "asideSticky": true,
      "data": {}
    }
      ,
      {
        // props...
      },
      env
    );
  }
}
};