react + antiDesign开发中遇到的问题记录

系统管理员 2021-04-06 13:33 685阅读 0赞

# react + antiDesign开发中遇到的问题记录 #

### 一：页面中子路由失效: ###

antiDesign的官方实例中，会把路由重复的地方给去重，而且路由匹配模式不是严格模式。所以我们需要在util.js修改两个地方

1：把路由匹配模式改为严格：

export function getRoutes(path, routerData) {
      let routes = Object.keys(routerData).filter(routePath =>
        routePath.indexOf(path) === 0 && routePath !== path);
      // Replace path to '' eg. path='user' /user/name => name
      routes = routes.map(item => item.replace(path, ''));
      // Get the route to be rendered to remove the deep rendering
      const renderArr = getRenderArr(routes);
      // Conversion and stitching parameters
      const renderRoutes = renderArr.map((item) => {
        // const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
        return {
          ...routerData[`${path}${item}`],
          key: `${path}${item}`,
          path: `${path}${item}`,
         exact: true,
        };
      });
      return renderRoutes;
    }

2:修改路由去重

###  二：表单类问题 ###

**1：双向数据绑定没有效果**

错误代码：（这里的input被div包着）

endTime: {
            name: '结束日期',
            rule: {
              rules: [],
              initialValue: fileds && fileds.endTime,
            },
            component: () => {
              return (
                <div style={ { display: 'flex' }}> <Input placeholder="请输入" style={ { borderRadius: 0 }} /> </div>
              );
            },
          },

正确代码： component返回的表单元素不要有其他元素包着

endTime: {
        name: '结束日期',
        rule: {
           rules: [],
           initialValue: fileds && fileds.endTime,
        },
        component: () => {
           return (
              <Input placeholder="请输入" style={ { borderRadius: 0 }} />
           );
        },
    },

### 三：父子组件传值的问题 ###

**1:子组件在接收父组件渲染的时候，只初始化渲染一次，父组件值改变后，子组件不会重新渲染。**

错误代码： 在子组件的willmount或者didmount接收了父组件的值。

componentDidMount() {
        const { ProductItemData } = this.props;
        this.setState({
          ProductItemData,
        });
      }

正确代码： 在componentWillReceiveProps中接收父元素数据。

componentWillReceiveProps(nextProps) {
        const { ProductItemData } = this.props;
        this.setState({
          ProductItemData,
        });
      }

### 四：编写组件 ###

**1:组件使用默认属性defaultProps**

const MyFunctionalComponent=(props)=>{
        return (
            <div>
                <p>{props.name}</p>
            </div>
        );
    }
    
    MyFunctionalComponent.defaultProps={
        name:'default name'
    };

### 五：请求 ###

**1:如何在axios拦截时修改headers中的值(例如多语言)**

axios.interceptors.request.use(
      (config) => {
        const config2 = config;
        config2.timeout = 30000; //eslint-disable-line
        config2.headers['Accept-language'] = 'USSSSS';
        return config2;
      },
      (error) => {
        // Do something with request error
        return Promise.reject(error);
      }
    );

如果这里直接操作config会报 no-param-reassign 的错误。