reactjs如何在应用程序内进行setState操作

时间:2019-10-07 10:30:18

标签: arrays reactjs setstate

我正在使用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 );

0 个答案:

没有答案