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:修改路由去重

function getRenderArr(routes) {
  const renderArr = [];
  renderArr.push(routes[0]);
  /** *去掉重復判斷，滿足/user,/user/detail類似URL的情況 */
  // for (let i = 1; i < routes.length; i += 1) {
  //   let isAdd = false;
  //   // 是否包含
  //   isAdd = renderArr.every(item => getRelation(item, routes[i]) === 3);
  //   // 去重
  //   renderArr = renderArr.filter(item => getRelation(item, routes[i]) !== 1);
  //   if (isAdd) {
  //     renderArr.push(routes[i]);
  //   }
  // }
  for (let i = 1; i < routes.length; i += 1) {
    renderArr.push(routes[i]);
  }
  return renderArr;
}

　　

 二：表單類問題

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 的錯誤。