作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我能够获取给定城市的天气,但不知道之后如何删除它。作为 Redux 的新手,我想弄清楚我在这个难题上遗漏了哪些部分。
我将 FETCH_WEATHER 代码留在上下文建议中。我的问题与 DELETE_CITY 实现有关。
步骤:
在每行中添加一个调用 Action 创建器的按钮。
Action 创建者采用“城市”的名称并返回类型为“DELETE_CITY”的 Action 。
Reducer,监视该类型并遍历城市数组并删除具有给定城市名称的对象。
Action 创作者
import axios from 'axios';
const API_KEY = '1111111111111111111111';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;
export const FETCH_WEATHER = 'FETCH_WEATHER';
export const DELETE_CITY = 'DELETE_CITY';
//fetch cities
export function fetchWeather(city){
const url = `${ROOT_URL}&q=${city},&units=imperial`;
const request = axios.get(url);
console.log('Request:', request);
return {
type: FETCH_WEATHER,
payload: request
}
}
//Delete Cities
export function deleteCity(city) {
return {
type: DELETE_CITY,
payload: city
}
}
reducer :index.js
import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather';
const rootReducer = combineReducers({
weather: WeatherReducer
});
export default rootReducer;
weather_reducer.js
DELETE_CITY 的情况是否准确实现?
import { FETCH_WEATHER } from '../actions/index';
import { DELETE_CITY } from '../actions/index';
export default function (state = [], action) {
console.log('Action received', action);
//only fetch weather data type
switch (action.type) {
case FETCH_WEATHER:
//concat to prevent state mutation
return state.concat([action.payload.data]);
case DELETE_CITY:
return state
.slice(0, action.payload.data)
.concat([action.payload.data].slice([action.payload.data] + 1));
}
return state;
}
Ps:mapStateToProps 和 mapDispatchToProps 是否正确?
weather_container.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Chart from '../components/chart';
import GoogleMap from '../components/google_map';
import { bindActionCreators } from 'redux';
import { deleteCity } from '../actions/index';
class WeatherList extends Component {
renderWeather(cityData) {
const name = cityData.city.name;
return (
<tr key={name}>
<td><button onClick={() => this.props.deleteCity(cityData)} className="btn btn-danger">x</button></td>
</tr>
)
}
render() {
return (
<table>
<thead>
<tr>
<th>City</th>
</tr>
</thead>
<tbody>
{this.props.weather.map(this.renderWeather)}
</tbody>
</table>
)
}
}
function mapStateToProps(state) {
return {
weather: state.weather
}
}
function mapDispatchToProps(dispatch, weather) {
return bindActionCreators({deleteCity},{weather}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(WeatherList);
我需要将 Action 创建者绑定(bind)到 onClick 事件。我尝试了两种方法:粗箭头函数和/或“在构造函数 () 中绑定(bind)方法”。
他们都返回未定义的 Prop 。
最佳答案
尝试替换:
{this.props.weather.map(this.renderWeather)}
与
{this.props.weather.map(this.renderWeather, this)}
map
的第二个参数是 thisArg
- 在执行 callback
时用作 this
的值。
关于javascript - Redux:调用 action-creator 返回 'Cannot read property ' props' of undefined',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45286460/
我是一名优秀的程序员,十分优秀!