错误:网络错误,另一个错误是“未定义类型”

时间:2018-08-01 13:16:20

标签: javascript reactjs redux react-router react-redux

我正在使用天气api来制作天气显示应用程序。 但是我想运行这个项目,它在动作创建器中显示错误,显示类型未定义。

actions / index.js

import axios from 'axios';

const API_KEY = '6614d40c20e44e4e437b2b20c951ecc';
const ROOT_URL = `https://samples.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,
    payload: request
  );
}

我已经创建了一个搜索栏,以用户身份搜索城市。

containers / search.js

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

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

    this.state = { term: '' };

    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(event){
  //  console.log(event.target.value);
    this.setState({ term:event.target.value });
  }

  onFormSubmit(event){
    event.preventDefault();

    // we need to go and fetch weather data
    this.props.fetchWeather(this.state.term);
    this.setState({ term: '' });
  }

  render(){
    return(
      <form onSubmit={this.onFormSubmit} className = "input-group">
        <input
          placeholder = "get a five-day forecast inypur city"
          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){
  return bindActionCreators({ fetchWeather }, dispatch)
}

export default connect(null, mapDispatchToProps)(SearchBar);

每当我尝试搜索城市时,都会显示这样的错误:类型不确定...

ERROR

1 个答案:

答案 0 :(得分:1)

  return(
    type: FETCH_WEATHER,
    payload: request
  );

这不是您想的那样。

相反,返回一个对象:

  return({
    type: FETCH_WEATHER,
    payload: request
   });