使用 react-redux 我正在嘗試創建中間件來執行異步等待邏輯，以便能夠使用 this.props.getUser 操作 function

Question

> // 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();
        }

我的開始渲染 function 為 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>

這是我的多 select 元素的開始，其中為 this.state 選擇了用戶。選擇 state

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

這是我要為用戶選擇角色的地方，它只是列出角色

                        <h5>Select a role to assign.</h5>
                        <select value={this.state.personnel} onChange={this.handleChange}
                            style={{ width: 265 + 'px', fontSize: 20 + 'px' }} name="personnel">
                            {Object.keys(Role).map(r => <option value={r}>{Role[r]}</option>)}
                        </select>
                        <br />
                        <Button style={{ marginLeft: 100 + 'px' }}>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>

這是我列出用於測試目的的值的地方，它是從上面的多選擇元素中選擇的用戶的 _id

                            {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))