那些年,React 踩過的坑
阿新 • • 發佈:2019-01-25
1. propTypes 空陣列報undefined Warning
舉例來說:
import React from 'react';
import { Breadcrumb, Icon } from 'antd';
import PropTypes from 'prop-types'
const BreadcrumbBlock = ({ paths }) => {
const items = paths.map( (path, index) => (
<Breadcrumb.Item key={index+1}>
<span>{path}</span>
</Breadcrumb.Item>
)) ;
return (
<Breadcrumb separator='>'>
<Breadcrumb.Item key="0">
<Icon type="home"/>
</Breadcrumb.Item>
{items}
</Breadcrumb>
);
}
Breadcrumb.propTypes = {
paths: PropTypes.array.isRequired
}
export default BreadcrumbBlock;
如果針對paths =[],則console會報warning:指示paths 的值是undefined,原來如果設定isRequired屬性,空值也預設是undefined,去掉後一切正常。
Breadcrumb.propTypes = {
paths: PropTypes.array
}