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);
});
};
}
にコール
を
にこのライン
を変更し、変更することは、なぜ何 'actions'と' actions.searchをCONSOLE.LOGありません'はデバッグ用ですか? –
'cityForcast'を正しくインポートしてください。名前付きエクスポートではなくデフォルトです。 –