1. 程式人生 > >那些年,React 踩過的坑

那些年,React 踩過的坑

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
}