Using react-redux my this.props.getUser() action function is off by 1 making http calls to database. this.props.user is Array(0) when first selected

> // I get user here with action function which makes call to route    /api/users/$_id      export const getUser = (_id) => (dispatch) => {          dispatch(setUsersLoading());          axios.get(`/api/users/${_id}`)              .then(res =>                  dispatch({                      type: GET_USER,                      payload: res.data                  }))              .catch(err =>                  dispatch(returnErrors(err.response.data, err.response.status))              );      }          > // This is my Manage Role Assignment component class        class ManageRoleAssignment extends Component {          constructor(props) {              super(props)                    this.state = {                  currentPage: 0,                  roles: "",                  selected: [], // this the state I'm using!                  personnel: []              }          }                static propTypes = {              getUsers: PropTypes.func.isRequired,              **getUser: PropTypes.func.isRequired**, //Prop action function used!              users: PropTypes.object.isRequired,              **user: PropTypes.object.isRequired**, //The prop object used!          }          componentDidMount() {              this.props.getUsers();                 }                handleChange = (e) => {          let target = e.target          let name = target.name          let value = Array.from(target.selectedOptions, option => option.value)          this.setState({              [name]: value          })                 }    > I'm calling the this.props.getUser here in the onSubmit            onSubmit = (e) => {           console.log("SELECTED", this.state.selected)          console.log("PERSONNEL", this.state.personnel)          //let { user } = this.props.user          this.props.getUser(this.state.selected)            console.log("USER", this.props.user)          e.preventDefault();          }  

The beginning of my render function for the class

        render() {          let { users } = this.props.users          const { currentPage } = this.state          this.pageSize = 1;          this.pagesCount = Math.ceil(10 / this.pageSize)                return (              <div>                  <Container className="list">                      <form onSubmit={this.handleSubmit}>                          <ListGroup>  

This is the beginning of my multi select element where the users are selected for the this.state.selected state

                            <h5>Select 1 or more users.</h5>                              <select size="2" value={this.state.selected} onChange={this.handleChange}                                  style= name="selected" id="users" multiple>                                  {users.map(({ _id, name, email, role }) => (                                      <option value={_id}>                                          {name}                                      </option>                                  ))}                              </select>                          </ListGroup>                          <br />                          <br />  

This is where I'm going to be selecting the role for the users, it just list roles

                        <h5>Select a role to assign.</h5>                          <select value={this.state.personnel} onChange={this.handleChange}                              style= name="personnel">                              {Object.keys(Role).map(r => <option value={r}>{Role[r]}</option>)}                          </select>                          <br />                          <Button style=>Submit </Button>                      </form>                      <Container className="personnelTable">                          <Table size="sm" striped >                              <thead>                                  <tr >                                      <th><h5>Name</h5></th><th><h5>Email</h5></th><th><h5>Role</h5></th>                                    </tr>                              </thead>  

This is where I'm listing the value for testing purpose which is the _id of the users that were selected from the multi selelect element above

                            {this.state.selected.map(value => (                                  <tr>                                      {value}                                  </tr>                              ))}                          </Table>                          <TablePagination                              currentPage={currentPage}                              pagesCount={this.pagesCount}                              handlePageClick={this.handlePageClick}                          />                      </Container>                  </Container>                </div >          )      }    }  const mapStateToProps = (state) => ({      users: state.users,      user: state.users  })    export default connect(mapStateToProps, { getUsers, getUser })((ManageRoleAssignment))  

https://stackoverflow.com/questions/65890723/using-react-redux-my-this-props-getuser-action-function-is-off-by-1-making-htt January 26, 2021 at 02:53AM