Error Code Collection

错误代码集锦，反面教材，需引以为戒!

cannot be used as a JSX component

代码问题描述：在父组件中引用了一个子组件，并作父子组件之间的一个交互，之前是没有问题的，但在写了比较多的逻辑之后，出现了这个错误，错误信息如下：

1
2
3
4
5
'ChildComp' cannot be used as a JSX component.
  Its return type 'Element | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.ts(2786)
(alias) const ChildComp: (props: IProps) => JSX.Element | undefined
import ChildComp

说的是我的子组件的返回值类型不对，因为作为React的子组件，返回值类型必须是JSX.Element或者是null，但是我子组件中还有可能会返回一个undefined，仔细检查了许久，最后发现是下面这段代码的问题，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const addModal = mode === ModalType.Add
const subModal = mode === ModalType.Sub
// 编辑或增加下级模式
if (!addModal && partFormValues) {
  if (subModal) {
    // 增加下级的时候 父级就是本身
    form.setFieldsValue({
      superOrg: partFormValues.name,
    })
    return
  }
  form.setFieldsValue({
    superOrg: partFormValues.parentName,
    orgName: partFormValues.name,
  })
}

代码本意是在subModal情况下，设置值之后，return掉，不让下面代码执行，忽略了代码在整个React组件中，所以导致返回值是undefined，在父组件中，就出现了错误，解决之道不适用return结束程序，而是使用else来做判断即可解决，如下：

1
2
3
4
5
6
7
8
9
10
11
if (!addModal && partFormValues) {
  if (subModal) {
    form.setFieldsValue({
      superOrg: partFormValues.name,
    })
  } else
  form.setFieldsValue({
    superOrg: partFormValues.parentName,
    orgName: partFormValues.name,
  })
}

总结：下次再遇到类似的问题，根据错误提示检查子组件，搜索return相关语句，是否是提交return掉了程序从而导致报错。