为什么我这么引入组件会报错

报的错误是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

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

阅读 1.7k
1 个回答

我把你代码粘到我项目里没有报错 应该是你别的地方的map未定义 你好好找一下

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题