Итак, я пытаюсь получить некоторые данные из серверной части непосредственно перед тем, как мой home
компонент рендерит:
Это компонент home
:
class App extends Component {
constructor(props) {
super(props);
//asta e o alternativa la componentwillmount dar nu pot sa alterez
//starea in constructor cica
}
componentWillMount(){
console.log('componentWillMount is executing')
console.log(store.getState())
//GetInitialData.bind(this)()
GetInitialData();
console.log('component should have executed')
}
Это мое состояние без состоянияКомпонент, ответственный за выполнение запроса и отправку ответа в хранилище приставок:
import axios from 'axios';
import { get_library } from '../../Redux/actions/Actions'
import store from "../../Redux/store/Store";
import { connect } from "react-redux";
const mapDispatchToProps = dispatch => {
return {
get_library : context => dispatch(get_library(context))
}
}
const GetInitialData2 = () => {
console.log('This should work')
}
const GetInitialData = (props) => {
console.log('Making the GET request')
//axios.get('http://localhost:8080/try')
axios({
method : 'get',
url : 'http://localhost:8080/getLibrary',
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization' : 'Bearer ' + getToken(),
},
})
.then(response => {
console.log('Store in Initial Data')
console.log(store.getState())
//store.dispatch(get_library(response.data))
//this.props.store.dispatch(get_library(response.data))
props.get_library(response.data)
//this.setState({ data: response.data });
console.log('New state now')
//console.log(this.state)
})
};
function getToken() {
// Retrieves the user token from localStorage
return localStorage.getItem('id_token')
}
//function GetInitialData (){ connect(null, mapDispatchToProps)(Connected_GetInitialData)}
//export default GetInitialData;
export default connect(null, mapDispatchToProps)(GetInitialData)
export default GetInitialData2;
Моя проблема в том, что я продолжаю получать ошибку props is not defined
, которая указывает на компонент home
, несмотря ни на что.Даже если я вызываю GetInitialData2 (который только что-то печатает) или GetInitialData.
Есть что-то, чего я не понимаю.Мне не нужно ничего передавать в мою функцию GetInitialData, поскольку все, что она делает, это изменяет хранилище избыточных данных.
EDIT - с промежуточным программным обеспечением:
class App extends Component {
componentDidMount() {
console.log('In DidMount, calling function');
GetInitialData();
console.log('DidMount should have executed');
}
И:
const GetInitialData = () => {
console.log('Making the GET request')
//axios.get('http://localhost:8080/try')
axios({
method : 'get',
url : 'http://localhost:8080/getLibrary',
headers : {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization' : 'Bearer ' + getToken(),
},
})
.then(response => {
console.log('Store in Initial Data')
console.log(store.getState())
console.log(response.data)
//store.dispatch(get_library(response.data))
store.dispatch(get_library(response.data))
//this.setState({ data: response.data });
console.log('New store state now')
console.log(store.getState())
})
};
function getToken() {
// Retrieves the user token from localStorage
return localStorage.getItem('id_token')
}
export default GetInitialData;
В результате он просто останавливается на store.dispatch
и ничего не делает.Все console.logs
работают, и я получаю действительный ответ.
Результат ... через слишком много часов: кажется, что он молча терпел неудачу на уровне редуктора, где у меня было:
const initialState = {
library: {},
playlist_names: [],
playlists : [],
songs : [],
articles : [],
};
И вместо этого должно было быть: library : [];
, ошибка была: TypeError: Invalid attempt to spread non-iterable instance
.Я только добился этого, напечатав response.data
в консоли и вручную запустив store.dispatch
из консоли браузера ... Я до сих пор не понимаю, почему эта ошибка не появилась.