Javascript 错误:网络错误,另一个错误是;“未定义类型”;
我正在开发天气api,以制作天气显示应用程序。。 但是我想运行这个项目,它在action creator中给出了一个错误,其中显示类型未定义 操作/index.jsJavascript 错误:网络错误,另一个错误是;“未定义类型”;,javascript,reactjs,redux,react-router,react-redux,Javascript,Reactjs,Redux,React Router,React Redux,我正在开发天气api,以制作天气显示应用程序。。 但是我想运行这个项目,它在action creator中给出了一个错误,其中显示类型未定义 操作/index.js import axios from 'axios'; const API_KEY = '6614d40c20e44e4e437b2b20c951ecc'; const ROOT_URL = `https://samples.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`
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
);
}
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);
我还制作了一个搜索栏,可以像用户一样搜索这个城市
容器/search.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
);
}
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);
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(事件){
//日志(event.target.value);
this.setState({term:event.target.value});
}
onFormSubmit(事件){
event.preventDefault();
//我们需要去获取天气数据
this.props.fetchWeather(this.state.term);
this.setState({term:'});
}
render(){
返回(
提交
)
}
}
功能图DispatchToprops(调度){
返回bindActionCreators({fetchWeather},dispatch)
}
导出默认连接(null,mapDispatchToProps)(搜索栏);
每当我尝试搜索城市时,它都会显示一个错误,即类型未定义,如下所示
这不是你想象的那样
而是返回一个对象:
return({
type: FETCH_WEATHER,
payload: request
});
@Panchal先生你能在修复后立即获取任何数据并设置你的状态吗?