毕设踩坑之路第二跳

提取评论展示组件


不同的评论下, 切换回复框显隐状态

解决: 在组件中设置state

提取commentItem组件, 多个组件会共享一个props

解决: 将baseCommentInput变为非受控组件, 自己管理状态

动态创建展示组件

  • ReactDOM.render

display的时候, 生命周期无法正常执行, 而且此方法不能append

  • 控制state动态append

创建评论&回复

解决: 只需添加from && to字段即可

ts重构后台


nodemon 无法直接解析 .ts 文件

解决: 添加 ts-node 模块, 可自动执行编译ts文件

package.json 配置启动命令

1
2
3
scripts: {
"server": "nodemon --watch ./server/**/*.ts --ignore ./server/**/*.spec.ts --exec ts-node ./server/server.ts",
}

执行2步骤后, 后台报错

解决: 将tsconfig.json"module": "esnext"改为 "commentjs".

执行3步骤后, antd 无法解析

原因: antd 依赖esnext

解决: 修改config-overridge.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const tsLoader = getLoader(
config.module.rules,
(rule) => (
rule.loader
&& typeof rule.loader === 'string'
&& rule.loader.includes('ts-loader'),
),
);

tsLoader.options = {
transpileOnly: true,
getCustomTransforms: () => ({
before: [tsImportPluginFactory({
libraryDirectory: 'es',
libraryName: 'antd',
style: 'css' | true,
})],
}),
compilerOptions: {
module: 'es2015',
},
};

mongoose


关联存储问题

解决: 互相依赖的字段, 例如 comments & replys, 创建新的 reply 时, 要将其push同步到 comments中.

react


componentDidMount执行两次的问题

原因: 使用react-transition-group作路由过渡, 每次enter和leave的时候, componentDidMount会执行两次

解决: 重构RouterConfig

1
2
3
4
5
6
7
...
<CSSTransition exit={false}>
<Switch location={props.location}>
{...}
</Switch>
</CSSTransition>
...

Can’t setState (or forceUpdate) on an unmounted component, This is a no-op, but it indicates a memory leak in your application.

原因: 未及时清理副作用

解决: componentWillUnmount 中清理 定时器 | 监听器 | setState 等.