Antd实战问题记录

1.关于Select下拉过滤问题

                    <Select
                        mode="multiple"
                        showSearch
                        placeholder={formatMessage({ id: 'function.base.setting.pls' })}
                        onSearch={(v) => {
                            if (v.length < 2) {
                                return
                            }
                            if (timer) {
                                clearTimeout(timer)
                            }
                            timer = setTimeout(() => {
                                dispatch({
                                    type: 'role/getUserByRoleId',
                                    payload: {
                                        roleId,
                                        realName: v
                                    },
                                });
                            }, 1000)
                        }}
                        // 后端过滤
                        optionFilterProp="label"
                    // 前端过滤
                    // filterOption={(input, o) =>
                    //     o.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                    // }
                    >
                        {
                            userInfRole.map(item => (
                                <Option value={item.userId} key={item.userId} label={item.realName}>{item.realName}</Option>
                            ))
                        }
                    </Select>

采用后端模糊搜索不设置optionFilterProp，option不会实时刷新

2.关于刷新页面location参数丢失问题 遗留：本地刷新location参数没有丢失线上环境会 目前解决方式：

import { useState, useEffect } from 'react';

export default (sessionData) => {
  const [seSsion, setseSsion] = useState('');
  useEffect(() => {
    if (sessionData) {
      sessionStorage.setItem('s1', JSON.stringify(sessionData));
      setseSsion(JSON.parse(sessionStorage.getItem('s1')));
    }
    return () => {
      sessionStorage.removeItem('s1');
    };
  }, []);
  return seSsion;
};

3.关于自定义FormItem

import { Switch } from 'antd';

export default ({ value, onChange }) => {
  return (
    <Switch checked={value === '0' ? true : false} onChange={(e) => onChange(e ? '0' : '1')} />
  );
};

接手Form传递的value与onChange并回传

4.关于Form表单控件依赖刷新

            <Form.Item
              noStyle
              shouldUpdate={(pre, cur) => pre.check_msg_switch !== cur.check_msg_switch}
            >
              {({ getFieldValue }) => (
                <Form.Item
                  name="frequency"
                  label={formatMessage({ id: 'sws.inventroy.setting.line2' })}
                >
                  <Frequency disabled={getFieldValue('check_msg_switch') === '0' ? true : false} />
                </Form.Item>
              )}
            </Form.Item>

5.关于分页器组件不同版本显示不一致问题 在低版本如：4.12.3 当第一页数据不够一页时候源码里有判断但是pageSize值取得不对导致判断没生效

            <Pagination
              current={current}
              style={{ margin: '10' }}
              total={total}
              showSizeChanger
              showQuickJumper
              pageSize={size}
              pageSizeOptions={[100, 200, 300, 400, 500]}
              showTotal={(v) =>
                formatMessage({ id: 'sws.inventroy.immediatelyUsing.error' }, { value1: v })
              }
              onChange={(c, s) => {
                dispatch({
                  type: 'swsNewInventoryDetail/getInventoryListDetail',
                  current: c,
                  size: s,
                  payload: {
                    taskId,
                    checkStatus,
                    userDeptId,
                    realName,
                  },
                });
                setselectedRowKeys([]);
              }}
            />

在4.16.13解决了的此问题