Carloin

# 📆 20220302

# 问题一

问题描述：引入 index.less 之后,在 chrome 提示属性值存在，但属性值提示无效。也就是说能引入这个样式，但是样式的值无效。
原因：说明引入的样式的写法没有问题，但是属性的值写法错了（😵晕，太久没写样式，都忘了怎么写）
解决：

//之前
.expandedRowSty {
  display: 'flex';
  font-size: '18px';
  color: 'rgba(0, 0, 0, 0.647058823529412)'
}
//修改后为
.expandedRowSty {
  display: flex;
  font-size: 18px;
  color: rgba(0, 0, 0, 0.647058823529412)
}

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

# 📆 20220304

# 问题一

问题描述：实现一个功能，点击按钮，能够恢复到数据没被修改前的数据。
思路：

一进入当前页，执行获取原始数据函数。
取消按钮，再一次执行获取原始数据的函数。
原始数据比如 dataSource,每次更新要深拷贝之前的数据。

实现：

//index.jsx
useEffect(async () => {
  await getInitData();
}, []);
// 获取原始数据
const getInitData = () => {
  dispatch({
    type: `${NAMESPACE}/getTableData`,
  });
};
// 取消按钮，再一次执行获取原始数据的函数
const cancelModify = async () => {
  await getInitData();
};
//model.js
state.dataSource = deepCopy(dataSource);

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

# 问题二

问题描述：设置了默认 pageSize,就不能改变每页显示条目数。为什么呢？
问题示例

const handlePage = () => {
  let pagesize = 10;
  let curPage = 1;
  return {
    showQuickJumper: true,
    onChange: (page) => {
      curPage = page;
    },
    showTotal: (total) => {
      return (
        <span className="pageTotalSty">
                      共{total}条记录 第{curPage}/
          {calculatePages(total, pagesize)}页          {" "}
        </span>
      );
    },
  };
};

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

# 📆 20220305

# 问题一

问题描述：React-Upload 在 Form 表单中报错。
[antd: Upload] value is not a valid prop, do you mean fileList
解决：

// 需要在Form.Item中加上getValueFromEvent={normFile}
const picNormFile = (e) => {
  console.log("Upload event:", e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};
//ModalCmpt/inde.jsx
<Form.Item
  label="设备图片"
  name="devPics"
  valuePropName="fileList" // 如果没有下面这一句会报错
  getValueFromEvent={picNormFile}
>
  <Upload
    name="devPic"
    action=""
    listType="picture-card"
    onChange={addPicture}
    onPreview={handlePreview}
  >
    {uploadButton}
  </Upload>
</Form.Item>;

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

# 问题二

setFieldsValue 可以这样 console.log

     configPageForm.setFieldsValue(
        (() => {
          console.log('123456');
          return {
            user: 'test',
            pw: 'test',
            age: '20',
          };
        })()
// 平常这样使用
 configPageForm.setFieldsValue({
            user: 'test',
            pw: 'test',
            age: '20',
})

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

# 问题三

问题描述：js 将数组转化为一个对象 obj，键值对形式{}
实现：

var formArr = [
  { name: "Name", value: "111" },
  { name: "Price", value: "2" },
];
var obj = {};
//map循环方式,注意不要return
formArr.map(function(e, item) {
  console.log(e.name);
  obj[e.name] = e.value; //{Name: '111', Price: '2'}
  //   return obj //不要return
});

1
2
3
4
5
6
7
8
9
10
11

# 📆 20220318

问题描述：react的antd批量删除数据
做法：在新增数据的时候，使用数据的长度作为key，key作为唯一标识，批量删除时，使用splice；获取需要删除的数据的keys(是个数组，其中的元素表示这条数据在数组中位置)，关键是将这个keys降序排序，相当从后往前删除，这样不会因为删除了前面的数据，而keys中位置没有得到及时更新，导致删除混乱。

//keys=[0,5,2]
let delKeys = keys.sort((a, b) => b - a); //从后往前删除,关键
delKeys.map((item) => {
  dataSource.splice(item, 1); //逐个删除
});

1
2
3
4
5

注意：在新增数据的时候，不要总想着生成的数据的key一定要是唯一，所以使用key={+new Date() + Math.random()生成唯一的数据，但是在批量删除的时候，会有些麻烦

← 202202 202204 →