Carloin

# 📆 20220208

# 问题一

问题描述：在前端使用模糊查询，但却在查询某个字段的时候出现报错，有的没有报错。
原因：查询的字段中是字符串的没有报错，是数字类型的报错。
解决：

if (curSelectValue && value) {
  // 模糊匹配,将已有的数据内容全部转为字符串类型，这样能够和查询关键字value进行匹配。
  let tmp = dataSource.filter((item) =>
    String(item[curSelectValue]).match(value)
  );
  !tmp.length ? message.warning("查询关键字不存在，换个关键词试试！") : "";
}

1
2
3
4
5
6
7

# 问题二

问题描述：在使用缓存的时候，注意考虑最初的、还没存进去的情况，这时候就要给个初始值。
解决：

// 在没有缓存的时候，给初始值[]
const getStoreData = storeData.getData() || [];

1
2

# 📆 20220214

问题描述：在 antd pro v4，react 16.14.0 项目中，使用原本项目封装的request请求 mock 数据报错。
解决：使用依赖包中request模块。

service.js

//使用项目构建时候封装的request
//import request from '@/utils/request';
//改成使用依赖的request
import request from "umi-request";

export async function postSaveTableData(saveData) {
  //这里确实能打印出数据，但是传到mock的时候是空
  console.log("saveData", saveData);
  return request(`/api/v1/configSaveTableData`, {
    method: "POST",
    data: saveData,
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13

mock/configTable.js

function postSaveTableData(req, res, u, b) {
  const body = (b && b.body) || req.body;
  console.log("body", body); //不管传什么都是空；改成使用依赖的模块之后能够获取post的值了
}
export default {
  "POST /api/v1/configSaveTableData": postSaveTableData,
};

1
2
3
4
5
6
7

# 📆 20220216

# 问题一

问题描述：antd 的 Table 中 title 是英文才会加粗，而中文不会。
解决：自定义

import React, { Component } from "react";
export default class ColumnsTitle extends Component {
  render() {
    //是需要加粗的title
    const { content } = this.props;
    return (
      <div>
        <span style={{ fontWeight: "bold", whiteSpace: "nowrap" }}>
          {content}
        </span>
      </div>
    );
  }
}
//父组件中使用
 this.columns = [
      {
        title: <ColumnsTitle content='设备名称' style={{ fontSize: '16px', color: '#202020' }}></ColumnsTitle>,
        dataIndex: 'test',
        key: 'test',
      },
      ...
    ]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 问题二

问题描述：antd 的 Table 滚动，宽度自适应，不换行的实例。
解决：

<Table
    className={styles.table}
    rowKey={(record) => record.key}
    columns={columns}
    dataSource={dataSource}
    scroll={{ x: 'max-content' }} // 加上这条 横向滚动 支持此属性的浏览器内容就不会换行了
    pagination={false}
   />
  // styles.less
 .table {
 :global {
  .ant-table-thead > tr > th {
   background: #fff !important;
   white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
  }
  .ant-table-tbody >tr> td {
   white-space: nowrap; // 防止IE等浏览器不支持'max-content'属性 导致内容换行
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 📆 20220217

# 问题一

问题描述：如何获取异步操作中的数据。
解决：

handleChange = async (info) => {
  let fileList = await (() => {
    return new Promise((resolve, reject) => {
      if (info.file.status === "done") {
        resolve(info.fileList);
      }
    });
  })();
  this.setState({
    fileList,
  });
};

1
2
3
4
5
6
7
8
9
10
11
12

# 问题二

问题描述：antd 组件，使用 Modal 表单中添加上传图片子项，发现每上传图片出现以下报错信息。
解决：

  <Modal
    key={'DevModal' + new Date() + Math.random()}
改为
  <Modal
    // key={'DevModal' + new Date() + Math.random()}/>

1
2
3
4
5
6

# 📆 20220222

问题描述：在antd4.x项目中使用Switch组件,出现如下问题

Warning: [antd: Switch]`value`is not a valid prop, do you mean`checked`?

解决：

//   4.x解决办法是添加valuePropName属性:
<Form.Item valuePropName="checked">
  <Switch />
</Form.Item>

1
2
3
4

# 📆 20220223

问题描述：antd的Table表单中设置编辑弹出框，弹出框直接弹出
解决：

{
      title: <ColumnsTitle content='操作'></ColumnsTitle>,
      dataIndex: 'action',
      render: (text, record) => {
        // console.log("record", record);
        // setCurNetWorkInterface(record.interface)
        return (
        //showNetWorkModal(record)直接调用了应该改成如下
          <a type="primary" onClick={()=>showNetWorkModal(record)}>
            编辑
          </a>
        )
      },

1
2
3
4
5
6
7
8
9
10
11
12
13

# 📆 20220224

问题描述：在dva中更新数据，发现只更新第一次，第二次不更新。
解决：

  updateNetWork(state, { payload }) {
      let netWorkData = state.netWorkConfigData
      let curValue = netWorkData.filter((item, index) => item.interface !== payload.interface)
      let curIndex =netWorkData.findIndex((item)=>item.interface===payload.interface)
      netWorkData.splice(curIndex,1,payload)
      //将   state.updateNetWorkArr=netWorkData改为state.updateNetWorkArr=[...netWorkData]
      state.updateNetWorkArr=[...netWorkData]
      return { ...state };
    }

1
2
3
4
5
6
7
8
9

← 202201 202203 →