毕设踩坑之路第三跳

七牛云域名

七牛云默认域名过期

解决: 绑定自定义二级域名

react-router-dom

Link 点击多次, 组件多次渲染的问题

解决: shouldComponentUpdate 优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
public static getDerivedStateFromProps(
  nextProps: IAdminProps,
) {
  return {
    pathname: nextProps.location.pathname,
  };
}

public readonly state = {
  pathname: '',
};

public shouldComponentUpdate(
  nextProps: IAdminProps,
): boolean {
  const currentPathname: string = this.state.pathname;
  const nextPathname: string = nextProps.location.pathname;

  return nextPathname !== currentPathname;
}
...

react-Quill

七牛图片无法正常显示

原因: 没有注册自定义的embed组件

解决

1
Quill.register(baseQuillImageBlot);

注意: 在接收到richContent之后和编辑页都要注册

antd表单

父组件处理子组件的表单数据

解决:

1
2
3
4
5
6
7
8
9
10
11
12
13
export default withRouter(Form.create({
  onFieldsChange(props, changedFields) {
    props.onCollectionInputChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      collection_input: Form.createFormField({
        ...props.collectionInputValue,
        value: props.collectionInputValue.value || '',
      }),
    };
  },
}))(components);

mongoose

mongoose中的数组不能用 arr.includes(id) 判断 是否存在

解决: 使用 v.equals(id).

ts

tsconfig.json 中已经开启 experimentDecorator, 仍然不能使用 decorator

解决

1
2
@(connect() as any)
class Co extends React.PureComponent{}

tsconfig.json - baseUrl

配置baseUrl选项, 可使用绝对路径导入包, 避免路径过长的问题.

1
2
3
4
5
{
  "compilerOptions": {
    "baseUrl": "./src",
  },
}

react-transition-group

阻止某个页面的路由过渡

解决

1
2
3
4
5
6
7
<CSSTransition
  key={
    /(\/user\/.+) | (\/home\/\w+)/.test(props.location.pathname)
      ? ''
      : props.location.pathname
  }
>...</CSSTransition>

react-router-dom

Invalid prop component of type object supplied to Route, expected function.

解决

1
2
3
4
5
<Route
  component={
    () => <App />
  }
/>