毕设踩坑之路第二跳

提取评论展示组件

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

解决: 在组件中设置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 等.