2017-04-20 8 views
0

私はReactJを開発しています。 コンポーネントにPropTypeを追加すると、エラーが発生します。'Home.js:19 Uncaught TypeError:actions.searchは関数ではありません'の解決方法

'Home.js:19 Uncaught TypeError: actions.search is not a function' 

ただし、検索機能を設定しました。 解決方法がわかりません。 それについてお手伝いしてください。 ありがとう!

コンポーネント

import { ButtonGroup, Button } from 'react-bootstrap'; 
import { Line } from 'react-chartjs'; 
import React from 'react'; 
import { connect } from 'react-redux'; 
import * as actions from '../actions/cityForcast'; 
import style from '../css/style.css'; 

export class Home extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.handleSearch = this.handleSearch.bind(this); 
    this.state = { 
     name: null, 
    }; 
    } 
    componentWillMount() { 
    this.props.search(this.props.application.token); 
    } 

    handleSearch(evt) { 
    evt.preventDefault(); 
    this.props.search(this.props.application.token); 
    } 
    render() { 
    let title = null; 
    return (
     <div className="center-block"> 
     test 
     </div> 
    ); 
    } 
} 

Home.propTypes = { 
    search: React.PropTypes.func, 
    cityForecast: React.PropTypes.shape({ 
    id: React.PropTypes.number, 
    name: React.PropTypes.string, 
    country: React.PropTypes.string, 
    coord: React.PropTypes.shape({ 
     lon: React.PropTypes.number, 
     lat: React.PropTypes.number, 
    }).isRequired, 
    cnt: React.PropTypes.string, 
    cod: React.PropTypes.string, 
    list: React.PropTypes.array, 
    result: React.PropTypes.bool.isRequired, 
    chartData: React.PropTypes.shape({ 
     labels: React.PropTypes.array, 
     datasets: React.PropTypes.arrayOf(
     React.PropTypes.shape({ 
      label: React.PropTypes.string, 
      fill: React.PropTypes.bool.isRequired, 
      lineTension: React.PropTypes.number, 
      strokeColor: React.PropTypes.string, 
      fillColor: React.PropTypes.string, 
      pointColor: React.PropTypes.string, 
      pointStrokeColor: React.PropTypes.string, 
      pointBorderWidth: React.PropTypes.number, 
      pointHoverRadius: React.PropTypes.number, 
      pointHoverBorderWidth: React.PropTypes.number, 
      pointRadius: React.PropTypes.number, 
      pointHitRadius: React.PropTypes.number, 
      data: React.PropTypes.array, 
     }), 
     React.PropTypes.shape({ 
      label: React.PropTypes.string, 
      fill: React.PropTypes.bool.isRequired, 
      lineTension: React.PropTypes.number, 
      strokeColor: React.PropTypes.string, 
      fillColor: React.PropTypes.string, 
      pointColor: React.PropTypes.string, 
      pointStrokeColor: React.PropTypes.string, 
      pointBorderWidth: React.PropTypes.number, 
      pointHoverRadius: React.PropTypes.number, 
      pointHoverBorderWidth: React.PropTypes.number, 
      pointRadius: React.PropTypes.number, 
      pointHitRadius: React.PropTypes.number, 
      data: React.PropTypes.array, 
     }), 
    ), 
    }), 
    }).isRequired, 
    application: React.PropTypes.shape({ 
    token: React.PropTypes.string, 
    createdAt: React.PropTypes.string, 
    }).isRequired, 
}; 

const mapStateToProps = (state) => { 
    const stateToprops = { 
    application: state.application, 
    cityForecast: state.cityForecast, 
    }; 
    return stateToprops; 
}; 

const mapDispatchToProps = (dispatch) => { 
    const dispatchProps = { 
    search: (token) => { 
     dispatch(actions.search(token)); 
    }, 
    }; 
    return dispatchProps; 
}; 

export default connect(
    mapStateToProps, 
    mapDispatchToProps, 
)(Home); 

../actions/cityForcast.js

import { SEARCH, SEARCH_NOT_FOUND } from '../constants'; 
import apiClient from '../utlis/api'; 
import forecastApiClient from '../utlis/forecastApi'; 

export default function search(token) { 
    return (dispatch) => { 
    apiClient().get(`/api/v1/get/`) 
     .then((apiResponse) => { 
     forecastApiClient().get(`/api/url`) 
      .then((forecastApiResponse) => { 
      dispatch({ 
       type: SEARCH, 
       forecastData: forecastApiResponse.data, 
      }); 
      }) 
      .catch((forecastApiResponse) => { 
      dispatch({ 
       type: SEARCH_NOT_FOUND, 
       forecastData: forecastApiResponse.data, 
      }); 
      console.log(forecastApiResponse); 
      }); 
     }) 
     .catch((apiResponse) => { 
     dispatch({ 
      type: SEARCH_NOT_FOUND, 
      forecastData: apiResponse.data, 
     }); 
     console.log(apiResponse); 
     }); 
    }; 
} 
+1

にコール

actions.search 

import search from '../actions/cityForcast' 

にこのライン

import * as actions from '../actions/cityForcast' 

を変更し、変更することは、なぜ何 'actions'と' actions.searchをCONSOLE.LOGありません'はデバッグ用ですか? –

+0

'cityForcast'を正しくインポートしてください。名前付きエクスポートではなくデフォルトです。 –

答えて

1

検索がデフォルトとしてエクスポートされます。

search 
+0

OKです。ありがとう!:) –

関連する問題