我正在使用api获取app.js。
我正在获取数据。但是我无法在获取中执行setState。 如何在访存中执行setState操作。 ?
非常感谢
JSON数据 {“ id”:1,“ first_name”:“”,“ last_name”:“”,“ profile”:{“ id”:1,“ userKey”:“ 0245abb9-2837-4f37-ae02-9be1b88887ef”,“ gsmNo “:” 05442221111“,”电话“:”“,”电子邮件“:”
import React, { Component } from 'react';
import {BrowserRouter, Route, Switch } from 'react-router-dom';
// import { renderRoutes } from 'react-router-config';
import './App.scss';
import {updateCustomer } from "../components/helpers/actions/customerActions";
import { userAction } from "../components/helpers/actions/userAction";
import { connect } from "react-redux";
const loading = () => <div className="animated fadeIn pt-3 text-center">Loading...</div>;
// Containers
const DefaultLayout = React.lazy(() => import('../containers/DefaultLayout'));
// Pages
const Login = React.lazy(() => import('../views/Pages/Login'));
const Register = React.lazy(() => import('../views/Pages/Register'));
const Page404 = React.lazy(() => import('../views/Pages/Page404'));
const Page500 = React.lazy(() => import('../views/Pages/Page500'));
class App extends Component {
// eslint-disable-next-line no-useless-constructor
constructor(props) {
super(props);
this.state={
user_information: []
}
/* this.state = {
profile_items: [ ]
}
*/
}
//Application ilk basladıında props'a set geçilsin ki,
//customerDebt, gibi componentlerin didmount fetch işlemlerinde hata vermesin
componentDidMount() {
let list = [ ];
fetch("http://127.0.0.1:8000/api/account/me", {
headers: {
Authorization: `Bearer ${localStorage.getItem("id_token")}`,
"Content-Type": "application/json"
}
})
.then(response => response.json())
.then(responseData => {
list = JSON.stringify(responseData);
this.setState({
user_information : responseData
});
console.log(list);
//return list;
});
console.log(this.state.user_information);
this.props.onUpdateCustomer({ID: "-1", customerKey: "-1"});
this.props.onUserInfo(this.state.user_information);
}
render() {
console.log(this.props);
return (
<BrowserRouter >
<React.Suspense fallback={loading()}>
<Switch>
<Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
<Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
<Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
<Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
<Route path="/" name="Home" render={props => <DefaultLayout {...props}/> }/>
</Switch>
</React.Suspense>
</BrowserRouter>
);
}
}
const mapStateToProps = (state, props) => {
return state;
};
const mapDispatchToProps = {
onUpdateCustomer: updateCustomer,
onUserInfo: userAction
};
export default connect(mapStateToProps, mapDispatchToProps) (App );