❤React体系优化（番外篇-优化写法 二 ）

1、配置css 的引入方式

通常我们会遇到一种情况：想在一个css之中导入其他的css模块，进行css的复用

一般使用方式 使用普通的 CSS 文件或者 CSS 模块来管理样式 使用 CSS-in-JS 库（例如 styled-components 或 Emotion）来处理样式

1. 使用传统的CSS @import 规则导入普通的 CSS 文件：

/* 在你的组件样式文件中 */
@import 'path/to/other-stylesheet.css';
 
/* 你的样式规则 */
.your-component {
  /* ... */
}

2、antd 优化使用

antd 优化使用

优化表单赋值

我们发现存在一个问题，每次新增的时候，表单还是之前的项值，这种怎么办呢

这里我们更改一下值的类型

// 设置整个表单的初始值
  const [initialValues, setInitialValues] = useState({
    status: 0, // 设置 status 字段的初始值
    dict_type:queryForm.dict_type,
    
    // 添加其他参数...
  });
  
  //修改新增时候的显示
 const handleAdd = () => {
    form.resetFields();
    setTitle('新增');
    setInitialValues({
      ...initialValues,
      dict_type:queryForm.dict_type,
    });
    setVisible(true);
  };

优化单选赋值

之前我们的赋值部分是这样子的

 const statusOptions = [
    { dictValue: 0, dictLabel: '正常' },
    { dictValue: 1, dictLabel: '停用' },
    // 更多选项...
  ];

但是我们存在一个问题，就是无法赋值

更改状态类型
const statusOptions = [
    { dictValue: '0', dictLabel: '正常' },
    { dictValue: '1', dictLabel: '停用' },
// 更多选项...
];

ok

表单默认值优化

之前我们写法是这样子

使用时会报错： Warning: [antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues of Form instead.

<Form.Item label="显示排序" name="dict_sort" rules={[{ required: true, message: '请输入数据键值' }]}>
  {/* onChange={onChange}  */}
  <InputNumber min={0} defaultValue={1} placeholder="请输入" />
 </Form.Item>

这个警告是由Ant Design中的Form.Item组件产生的。警告信息指出defaultValue属性不会在某些条件下工作。就是建议我们使用Form组件的form属性进行表单数据的管理时，defaultValue属性应该使用setFieldsValue方法。

更改写法以后

<Form form={form} initialValues={initialValues} ></Form>
 // 设置整个表单的初始值
  const [initialValues, setInitialValues] = useState({
    status: 0, // 设置 status 字段的初始值
    dict_type:queryForm.dict_type,
    dict_sort:1,
    // 添加其他参数...
  });

3、TS写法优化

在我们赋值菜单的时候一直提示 类型“{ key: string; icon: Element; title: string; children: { key: string; title: string; path: string; }[]; }[]”的参数不能赋给类型“SetStateAction<never[]>”的参数。 不能将类型“{ key: string; icon: Element; title: string; children: { key: string; title: string; path: string; }[]; }[]”分配给类型“never[]”。 不能将类型“{ key: string; icon: JSX.Element; title: string; children: { key: string; title: string; path: string; }[]; }”分配给类型“never”。ts(2345)

这个时候是由于TS类型错误引起的

意思就是 useState([]) 中尝试将一个对象数组赋值给 useState 的初始状态，但是 TypeScript 推断不出数组中的对象的类型。提供一个初始状态的类型定义，或者通过类型断言明确告诉 TypeScript 数组中的对象的类型即可

4、路由加载控制台报错处理

Error handled by React Router default ErrorBoundary: Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

在项目启动加载时候报错，由于异步加载发生的错误

解决方法

这个时候在我们的外层加Suspense 就可以了

5、上传部分图片部分优化

上传图片成功以后，之后我们进行新增的时候图片无法清空，这个时候应该怎么做呢

使用 Ant Design 的 Form 组件提供的 setFieldsValue 方法来设置表单字段的值

// 上传完成后更新图片地址 
form.setFieldsValue({ thumburl: info.file.response.url }); 

// 将上传成功的图片地址设置到表单字段 thumburl setImageUrl(info.file.response.url); 

// 同时更新组件内部状态的 imageUrl


// 清空组件
form.setFieldsValue({ thumburl: null });
setImageUrl(undefined);