react的hook里设置了默认值会报错

Question

我用react+ts写一个小demo
发现父组件给子组件传值的时候，设置的默认的props，还是会报错，有谁遇到过吗？
父组件

<MultiCheck columns={2}/>
   

子组件

type Props = {
  columns?: number,
}

const MultiCheck: React.FunctionComponent<Props> = (props): JSX.Element => {
  const {
 
    columns,

  } = props;
    
    for (let i =0;i<columns;i++){
     这里读取columns会报错，TS2532: Object is possibly 'undefined'.    
    }



  return <div className='MultiCheck'>
 
  </div>
}
MultiCheck.defaultProps={
  columns:1,

};


export default MultiCheck;

for里面报错，我知道可能是column未定义，但是我下面不是设置了默认column是1了吗？这种情况怎么解决？？

Answer 1

你类型上声明了 columns 为可选项，即：columns?: number，所以ts就是会报警，说这个字段可能为 undefined。

至于你利用 react 的api 设置的默认值，ts不认识的。

所以你的case里，既然有默认值，那么声明类型时，就别加 ? 了，因为他已经不是可选项，而且肯定有值了