报的错误是bundle.js:42319 Uncaught TypeError: Cannot read property 'map' of undefined
一开始页面代码是这样的

import React  from 'react'
import SearchInput from '../SearchInput'
import './index.less'
import { Link } from 'react-router';

class IndexHead extends React.Component {
  constructor(props,context){
      super(props,context);
  }
  render() {
    return(
      <div className="HomeHeader page-wrap">
        <div className="leftcity"><Link to="/city">{this.props.cityName} <i className="icon-angle-down"></i></Link></div>
        <div className="inputwrap page-wrap">
          <input placeholder="请输入关键字"/>
          <i className="icon-search"></i>
        </div>
        <div className="leftcity">
           <i className="icon-user"></i>
        </div>

      </div>
    )
  }
}
export default IndexHead

后面我决定把输入框抽离出来。
于是我把

<div className="inputwrap page-wrap">
          <input placeholder="请输入关键字"/>
          <i className="icon-search"></i>
 </div>

这一块拿了出来。

import React from 'react'

import './style.less'

class SearchInput extends React.Component {
    constructor(props, context) {
        super(props, context);
    }
    render() {
        return (
          <div className="inputwrap page-wrap">
            <input placeholder="请输入关键字"/>
            <i className="icon-search"></i>
          </div>
        )
    }
}

export default SearchInput

然后再页面引入。就报错了。

import React  from 'react'
import SearchInput from '../SearchInput'
import './index.less'
import { Link } from 'react-router';

class IndexHead extends React.Component {
  constructor(props,context){
      super(props,context);
  }
  render() {
    return(
      <div className="HomeHeader page-wrap">
        <div className="leftcity"><Link to="/city">{this.props.cityName} <i className="icon-angle-down"></i></Link></div>
        <SearchInput/>
        <div className="leftcity">
           <i className="icon-user"></i>
        </div>

      </div>
    )
  }
}
export default IndexHead

后来我只把输入框抽离出来引入就不报错了这是为什么