Javascript React不识别我的功能

我正在用Reactjs开发一个应用程序，利用Redux架构。该应用程序使用的是第三方api，当我将城市提交到搜索栏时会调用该api。在测试过程中，我得到一个控制台错误，其内容如下：

Uncaught TypeError: this.props.fetchWeather is not a function

我不清楚为什么React告诉我fetchWeather在src/actions/index.js上作为函数存在时不是函数：

import axios from 'axios';

const API_KEY = 'spj3q-9huq]-hq -9hq 0rgjeth9e';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

export function fetchWeather(city) {
  const url = `${ROOT_URL}&q=${city},us`;
  const request = axios.get(url);

  return {
    type: FETCH_WEATHER,
    // optional property
    // promise passed in
    payload: request
  };
}

this.props.fetchWeather（this.state.term）；这是我获取天气数据所需的，这行代码存在于container/search_bar.js中：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchWeather} from '../actions/index';

export default class SearchBar extends Component {
  constructor(props) {
    super(props);

    this.state = {term: ''};

    this.onInputChange = this.onInputChange.bind(this);
    // always need to bind this
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(event) {
    this.setState({term: event.target.value});
  }
  // callback
  onFormSubmit(event) {
    event.preventDefault();

    // We need to go fetch weather data
    this.props.fetchWeather(this.state.term);
    // clear out the search input
    this.setState({term:''});
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit} className="input-group">
        <input
          placeholder="Get a five day forecast in your favorite cities"
          className="form-control"
          value={this.state.term}
          onChange={this.onInputChange}
        />
        <span className="input-group-btn">
          <button type="submit" className="btn btn-secondary">Submit</button>
        </span>
      </form>
    )
  }
}

function mapDispatchToProps(dispatch) {
  // makes sure this flows down into the middleware
  return bindActionCreators({fetchWeather}, dispatch);
}

connect(null, mapDispatchToProps)(SearchBar);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“redux”导入{bindActionCreators}；
从“../actions/index”导入{fetchWeather}；
导出默认类搜索栏扩展组件{
建造师（道具）{
超级（道具）；
this.state={term:'}；
this.onInputChange=this.onInputChange.bind（this）；
//总是需要把这个绑起来
this.onFormSubmit=this.onFormSubmit.bind（this）；
}
onInputChange（事件）{
this.setState（{term:event.target.value}）；
}
//回拨
onFormSubmit（事件）{
event.preventDefault（）；
//我们需要去获取天气数据
this.props.fetchWeather（this.state.term）；
//清除搜索输入
this.setState（{term:'}）；
}
render（）{
返回(
提交
)
}
}
功能图DispatchToprops（调度）{
//确保这流到中间件中
返回bindActionCreators（{fetchWeather}，dispatch）；
}
连接（空，mapDispatchToProps）（搜索栏）；

您需要导出redux组件，而不是react组件

---

导出默认连接（null，mapDispatchToProps）（搜索栏）
Stephen Grider的课程？删除
this.props.
，该函数不是一个道具，只是文件范围内的一个函数。@Gerardo，是Grider的课程，看起来Serge是正确的，Grider是错误的。Stephen是正确的，您可以检查代码@Gerardo，您是对的。在检查代码之后，我注意到我的SearchBar类有导出默认值，这解释了我之前遇到的另一个错误，我无法实现导出默认值两次。我以为是指app.js文件。现在我可以按照Doug的建议添加导出默认值来连接。Doug，我的理解是，在React中，您不能两次导出默认值。如果我们在app.js中有它，我们就不能在search_bar.js中再做一次。我尝试了它并收到了以下错误：bundle.js:22526未捕获错误：找不到模块“./container/search\u bar”