У меня возникли проблемы при попытке получить список компаний, чтобы показать после входа в систему в React

Question

У меня работает форма входа, но я пытаюсь сделать так, чтобы при входе в систему вы могли видеть список компаний, с которыми вы связаны.Единственное, что после входа в систему вы просто видите заголовок «Выберите компанию», но нет списка компаний, ЕСЛИ БЫ не обновите страницу, вы увидите всплывающий список компаний.Что я могу сделать, чтобы сделать так, чтобы я мог показать компании или каким-то образом перерисовать страницу, чтобы появился список.Я попытался использовать forceUpdate (), но это не сработало, и я возился с ComponentDidMount (), но у меня ничего не получилось.

Ниже приведен код

 import React from 'react';
 import Button from '@material-ui/core/Button';
 import { List, ListItem } from 'material-ui/List';
 import { connect } from 'react-redux';
 import * as actions from '../../../actions';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import TextField from 'material-ui/TextField';

class Login extends React.Component {


constructor(props) {
super(props);
this.state = {
    username: '',
    password: '',
}

this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);


}



onChange(e){
 this.setState({[e.target.name]: e.target.value});
}

onSubmit(e) {
 this.props.loginUser(this.state.username, this.state.password);
 this.forceUpdate();

}

refreshPage(){
 this.forceUpdate();
}


handleCompanySelectionClick(event, company) {
 this.props.selectCompany(company.id, () => {
    window.location = "/dashboard";
  });
 }

 handleCompaniesLoadedState() {
    const main1 = {
     color: '#25AFF2',
     textAlign: 'center',
     paddingTop: 120
  }





switch(this.props.selectedCompany) {
    case null: {
        // check if the user only has one company, or has selected a default company they want to go to. if they do, then redirect to Dashboard.

        var companies = this.props.companies;
        if (companies.length === 1) {
            this.handleCompanySelectionClick(null, companies[0]);
            return;
        }

        var defaultCompanyID = this.props.auth.default_comp;
        if (defaultCompanyID != null) {
            for (let i = 0; i < companies.length; i++) {
                if (defaultCompanyID === companies[i].id) {
                    this.handleCompanySelectionClick(null, companies[i]);
                    return;
                }
            }
        }


        // multiple companies with no default, present to the user
        return (
            <MuiThemeProvider>
                <div style={main1}>
                    <h4>Select a Company</h4>
                    <List component="nav">
                        {this.props.companies.map(c =>
                        <ListItem
                            value={c.id}
                            key={c.id}
                            primaryText={c.name}
                            onClick={event => this.handleCompanySelectionClick(event, c)}
                            /> )}

                    </List>
                </div>
            </MuiThemeProvider>
        )
    }
    default: 
        return (
            <div style={main1}>
                <h5>
                You're logged in: {this.props.selectedCompany.name}
                </h5>
                <a href="/dashboard">Go to Dashboard</a>
            </div>
        );
}
}

 handleLoggedInState() {
   switch(this.props.companies) {
    case null: 
        // no companies loaded yet
        this.props.fetchCompanies();
        return null;
    default: 
        // companies loaded, check to see if the user has selected a company 
          already
        return this.handleCompaniesLoadedState();
      }
    }



  render() {
     const main = {
      color: '#25AFF2',
      textAlign: 'center',
      paddingTop: 120
     }

   const button = {
     backgroundColor: '#25AFF2',
     color: 'white',
     marginTop: 35
 }

const avatar = {
    width: 16,
    height: 16,
    display: 'inline-block',
    fontSize: 24,
    flexShrink: 0,
    textAlign: 'center',
}

const divStyle = {
    backgroundColor: '#E10050',
    color: 'white',
    width: 40,
    height: 40,
    borderRadius: 50,
    fontSize: 20,
    flexShrink: 0,
}

switch(this.props.auth) {
    case null:
        // unclear if we're logged in or out
        return null;
    case false: 
        // definitely logged out
        return (
        <div>
            <MuiThemeProvider>
                <form onSubmit={this.refreshPage}>
                <div style={main}>
                    <h4>Login here</h4>
                    <TextField
                        hintText="Enter username"
                        floatingLabelText="Username"
                        onChange={(event, newValue) => this.setState({username:newValue})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hintText="Enter password"
                        floatingLabelText="Password"
                        onChange={(event, newValue) => this.setState({password:newValue})}
                    />
                    <br/>
                    <Button style={button} primary={true} label="Submit"  onClick={(event) => this.onSubmit(event)}> Login </Button>
                </div>
                </form>
            </MuiThemeProvider>
        </div>
    )
    default:
        return (
            <div>
                {this.handleLoggedInState()}
            </div>
        );
}
}
}

  function mapStateToProps({ auth, companies, selectedCompany }) {
    return { auth, companies, selectedCompany };
    }

   export default connect(mapStateToProps, actions)(Login);

Answer 1

Итак, вам нужно включить функцию SelectCompany Switch в функцию Render () Как

render() {
    switch(this.props.selectedCompany) {
        case null: {
            ...
            ...
        }
        ...
    }

    switch(this.props.auth) {
        case null:
        ...
    }
}

Примечание: вы получаете Props Only только под функцией Render ().