被奇葩问题困住记录

1，登录系统后第一次访问页面时，调用接口的resa会报错

：TypeError:overviewIndexResa.getConfigList is not a function

import * as Api from '../api/index';

interface OverviewIndexResaState {}

@init<OverviewIndexResaState>({
  name: 'OverviewIndex', ------> 通过修改这个名称解决问题！！！！
  state: {},
})
export default class OverviewIndex extends Model<OverviewIndexResaState> {

2，为实现动态表头和可展开table

<Table
    className={flag === 'realTime' ? '' : css.tableHis}
    rowKey="key"
    pagination={{
      ...pagination,
      showSizeChanger: true,
      pageSizeOptions: ['10', '20', '50'],
      showTotal: total => `共 ${total} 条数据`,
    }}
    onChange={handleTableChange}
    columns={tableColumns}
    dataSource={dataSource.slice(
      (pagination.current - 1) * pagination.pageSize,
      pagination.current * pagination.pageSize,
    )}
    expandedRowKeys={expandedRowKeys}
    onExpandedRowsChange={expandedKeys => {
      setExpandedRowKeys(expandedKeys as string[]);
    }}
    scroll={{ y: 600 }}
    locale={{ emptyText: <NoData /> }}
  />

卡在使用expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}来实现展开，导致子节点也会有展开功能， 最终发现，只要把数据处理成树的结构，Table组件会自动形成可展开的结构

3，使用pubg的form表单来实现弹窗，关闭弹窗，会出现上次的输入的值

form.current.clearValues();//清除item的值----->要使用组件中的特定方法来清除
form.current.clearValidates();//清除校验
	
const validateResult = form.current.validateAll();   //校验
    if (Object.keys(validateResult).length !== 0) {
      return null;
    }

 const { caseName, opinion } = form.current.getAllValue();   //获取所有item值
 const protocolType = form.current.getValue('protocolType');  //获取某个item的值
 
 使用pubg的form表单的话，要注意radio，switch等，需要**使用 `useState` 管理状态**：

    -   为[template]() 状态创建独立的 `useState` 钩子
    -   在 `useEffect` 中初始化这些状态值
    -   在 `Switch` 组件中使用这些状态变量
 //例子
 // 在组件顶部添加状态声明
 const [template, setTemplate] = useState(true);
  <FormItem id="template" label="保存为模板">
    <Switch
      checked={template}
      onChange={checked => {
        if (form.current) {
          form.current.setValue('template', checked);
        }
        setTemplate(checked);
      }}
    />
  </FormItem>

这周的疑惑，之前也有很多奇葩问题都没记录，之后会一一记录下来 >_<

4,当用户选择日期时，自动将分秒设为 00:00，保留小时 当用户选择具体时间时，保留用户选择的时间 当用户点击确定按钮时，使用最终选择的时间范围

主要要区分场景：当用户选择日期时 和 当用户选择具体时间时

  const [taskDetail, setTaskDetail] = useState<any>({
    taskName: '',
    calculateInterval: 10,
    timeRange: [],
  });
  const [isDateChange, setIsDateChange] = useState<any>(false); 
  
   const onTimeChange = (dates: [moment.Moment, moment.Moment] | null) => {
    if (dates) {
      const [start, end] = dates;
      setTaskDetail({
        ...taskDetail,
        timeRange: [start, end],
      });
    }
  };

  const onTimeOk = dates => {
    if (dates) {
      const [start, end] = dates;
      // 更新显示的时间范围
      setTaskDetail({
        ...taskDetail,
        timeRange: [start, end],
      });
      // 添加到时间列表中
      timeList.push({
        startDate: parseInt(start.format('x')),
        endDate: parseInt(end.format('x')),
      });
      setTimeList([...timeList]);
    }
  };
  // 处理时间面板的更改事件
  const onCalendarChange = (dates: [moment.Moment, moment.Moment] | null, _dateStrings: [string, string]) => {
    if (dates && dates.length !== 2) {
      setIsDateChange(true);
    }
    if (dates && dates.length === 2 && isDateChange) {   //由此判断用户是在做日期选择
      setIsDateChange(false);
      // 当选择日期时，自动设置时间为00:00
      const [start, end] = dates;
      const formattedStart = start ? start.seconds(0).minutes(0) : null;
      const formattedEnd = end ? end.seconds(0).minutes(0) : null;
      setTaskDetail({
        ...taskDetail,
        timeRange: [formattedStart, formattedEnd],
      });
    }
  };
  
  
  <FormItem
      id="timeRange"
      hasFeedback={true}
      label="时间范围"
      rules={requiredNameValidator('时间范围')}
      value={taskDetail.timeRange}>
      <RangePicker
        style={{ width: '100%' }}
        format={'YYYY/MM/DD HH:mm:ss'}
        value={taskDetail.timeRange}
        onChange={onTimeChange}
        onOk={onTimeOk}
        onCalendarChange={onCalendarChange}
        showTime={{
          format: 'HH:mm:ss',
        }}
        allowClear={false}
        placeholder={['开始时间', '结束时间']}
      />
    </FormItem>