javascript - 如何解决 'Home.js:19 Uncaught TypeError: actions.search is not a function'

Question

我正在开发 ReactJs。当我在组件上添加 PropTypes 时，出现以下错误。

'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);
      });
  };
}

Answer 1

默认导出搜索。更改此行

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

至

import search from '../actions/cityForcast'

并更改调用

actions.search

至

search