Redux: Call To Action-creator Returns 'cannot Read Property 'props' Of Undefined'
I'm able to fetch the weather by a given city but can't figure how to delete it afterwards. Being still new to Redux I'm trying to figure which pieces am I missing on this puzzle.
Solution 1:
Try replaceing:
{this.props.weather.map(this.renderWeather)}
With
{this.props.weather.map(this.renderWeather, this)}
The second argument of map
is the thisArg
- value to use as this
when executing callback
.
Solution 2:
You need to bind renderWeather
function.
classWeatherListextendsComponent{
constructor(){
super();
this.renderWeather = this.renderWeather.bind(this);
}
...
}
Solution 3:
The error message you're getting cannot read property props of undefined
means that in this.props
this
is undefined.
It's a common gotcha in react, mainly because this is falling out of context.
What you need to do is bind the renderWeather function to WeatherList in the constructor
constructor() {
this.renderWeather = this.renderWeather.bind(this)
}
Another alternative is to use arrow functions
class {
renderWeather = (weatherData) => {
...
}
...
}
You might also consider this implementation in you reducer when deleting a city.
[...state].filter((weather) => {
return weather.id != action.payload.data.id
})
.filter()
returns a new array of items that meet the given condition
Post a Comment for "Redux: Call To Action-creator Returns 'cannot Read Property 'props' Of Undefined'"