Witam, tworzę aplikację walutową na której uczę się użycia Redux z reactem. Metoda fetch pobiera mi dane, widzę je w konsoli, jednak gdy próbuję po nie sięgnąć wyskakuje mi błąd. Rozumiem, że jest to spowodowane tym, że zanim dane się załadują ja próbuję użyć danych ze store. Pytanie moje brzmi: Jak poprawnie uzyskać dostęp do danych?
React 
JavaScript - Rejestracja:prawie 15 lat
- Ostatnio:17 dni
1
Nie podałeś żadnych informacji w postaci kodu, którego używasz.
Żeby użyć danych z fetch'a potrzebujesz metody then:
fetch(url).then(response => response.json()).then(json => {
useData(json);
});
całość polega na napisaniu funkcji useData, która używa tych danych.
edytowany 1x, ostatnio: jackweb
- Rejestracja:ponad 6 lat
- Ostatnio:prawie 5 lat
- Postów:13
0
moja akcja wygląda tak :
export function fetchCurrency() {
return function(dispatch) {
fetch("https://api.exchangeratesapi.io/latest")
.then(res => {
return res.json();
})
.then(res => {
dispatch({ type: "FETCH_CURRENCY", payload: res });
})
.catch(err => {
console.log(err);
});
};
Pobiera mi dane, widzę je w konsoli ale nie mogę z nimi pracować
- Rejestracja:prawie 15 lat
- Ostatnio:17 dni
1
W skrócie potrzebujesz:
- reducera, który dostając
FETCH_CURRENCYzaktualizuje stan Redux opayload. - funkcji
mapStateToProps, która zamieni stan reduxa na propsy komponentu. - połączyć komponent z funkcją mapStateToProps (
connect)
jackweb
4. No i oczywiście użyć tych danych w komponencie - jako this.props....
- Rejestracja:ponad 6 lat
- Ostatnio:prawie 5 lat
- Postów:13
0
Mój reducer:
const initialState = {
currency: []
};
export default function(state = initialState, action) {
switch (action.type) {
case "FETCH_CURRENCY":
return {
...state,
currency: action.payload
};
default:
return state;
}
}
Mam też Mapstatetoprops i mapDispatchtoProps :
const mapStateToProps = state => {
console.log(state.currency.rates);
return { data: state };
};
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
fetchCurrency
},
dispatch
);
export default connect(mapStateToProps, mapDispatchToProps)(App);
- Rejestracja:ponad 6 lat
- Ostatnio:prawie 5 lat
- Postów:13
0
Pobieram dane przez componentDidMount. Sprawdzam konsolę i widzę dane w konsoli:
{rates: {…}, base: "EUR", date: "2019-12-17"}
gdy jednak próbuję je pokazać ze store {this.props.data.currency.CAD} wyskakuje TypeError: Cannot read property 'props' of undefined. Nie mam pojęcia jak do tego podejść
- Rejestracja:ponad 6 lat
- Ostatnio:prawie 5 lat
- Postów:13
0
import React from "react";
import { connect } from "react-redux";
const CurrencyConverter = () => {
return (
<>
<h1>Currency Coverter APP</h1>
<h3>Convert Euro to => {this.props.data.currency.CAD}</h3>
</>
);
};
const mapStateToProps = state => {
return { data: state };
};
export default connect(mapStateToProps)(CurrencyConverter);
w konsoli pokazuje, że błąd jest tutaj => ```
Convert Euro to => {this.props.data.currency.CAD}
</p> edytowany 1x, ostatnio: Jurek_M
- Rejestracja:ponad 6 lat
- Ostatnio:prawie 5 lat
- Postów:13
0
Ciekawa sprawa, gdy spojrzę na konsolę wyglada ona tak:
rates: {CAD: 1.469, HKD: 8.6953, ISK: 136.6, PHP: 56.413, DKK: 7.4731, …}
base: "EUR"
date: "2019-12-17"
__proto__: Object
gdy próbuję dostać currency.rates.CAD wyskakuje błąd, ale gdy dam currency.rates.base to zwraca mi EUR. Tak jakbym nie mógł się dostać do obiektu rates
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.