繁体   English   中英

使用 react-redux 我正在尝试创建中间件来执行异步等待逻辑,以便能够使用 this.props.getUser 操作 function

Using react-redux I'm trying to create middleware to do async await logic to be able to use this.props.getUser action function

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

> // 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))
问题暂未有回复.您可以查看右边的相关问题.
2 react-redux 错误:操作必须是普通对象。 使用自定义中间件进行异步操作

我有一个非常简单的代码,用于在按下 + 或 - 按钮时递增和递减。 但每当我按下按钮时,我都会收到错误消息。 我已经研究了大约 4 个小时,但找不到原因。 我很确定我没有执行任何异步操作并且我的操作正在返回 JavaScript 对象动作代码: 减速机代码: 应用组件代码: 非常感激。 ...

5 动作必须是普通对象。 使用自定义中间件进行异步操作。 react-redux

我是 reac-redux 的新手,我正在尝试从 Firestore 获取集合,但现在当 firebase 返回数据并尝试通过 redux-observable 将信息存储到 map 时,我收到一个错误“操作必须是普通对象。使用自定义中间件用于异步操作。” 我猜肯定是关于史诗配置的,那我留下代码 ...

10 如何在React-Redux中间件中不使用超时使代码同步

我试图调度一个动作,并使用中间件来检查令牌是否过期,如果过期,我正在生成新令牌。 然后,我在api中使用这个新令牌。 问题是代码异步流动。 api使用的是旧令牌,而不是生成的新令牌。 请帮助我解决问题。 注意-中间件代码在index.js文件中 动作创作者- 中间件- ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM