毕设踩坑之路第三跳

七牛云域名


七牛云默认域名过期

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

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 />
}
/>