使用reactjs和redux获取特定的用户记录

时间:2018-11-01 22:21:02

标签: reactjs redux

下面的代码通过从数据库中检索所有用户信息来完美地工作。现在我要
仅记录名为 Jmakkati 的用户,但无法正常工作。

我已经初始化了 User变量(Jmakkati),并且已将其传递给getAll(user_rec)函数,但该函数不起作用。如果设置 状态,如下所示,它将显示错误用户未定义

this.state = {
            user_rec: {
                myname: 'jmarkatti',

            }
        };

这是主要代码

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { userActions } from '../_actions';

class HomePage extends React.Component {


constructor(props) {
        super(props);

this.user_rec ='jmarkatti';

/*
   this.state = {
            user_rec: {
                myname: 'jmarkatti',

            }
        };
*/

    }


    componentDidMount() {
       this.props.dispatch(userActions.getAll(user_rec));
    }

    render() {
        const { user, users } = this.props;
        return (
            <div style={{background:'red'}} className="well">
                <h1>Welcome</h1>

                {users.error && <span className="text-danger">ERROR: {users.error}</span>}
                {users.items &&
                    <ul>
                        {users.items.map((user, index) =>
                            <li key={user.id}>
                                {user.firstName + ' ' + user.lastName}
                                {

                                    : <span> - <a >Welcome</a></span>
                                }
                            </li>
                        )}
                    </ul>
                }
                <p>

     Info.

                </p>



            </div>



        );
    }
}


function mapStateToProps(state) {
    const { users, authentication } = state;
    const { user } = authentication;
    return {
        user,
        users
    };
}


const connectedHomePage = connect(mapStateToProps)(HomePage);
export { connectedHomePage as HomePage };

这里只是 User.service.js

function getAll(user_rec) {

    const data = {
        method: 'GET',
       // headers: authHeader()
       headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({user_rec})
    };
    return fetch(`${apiUrl}/record.php`, data).then(handleResponse)
     .then(user => {

            if (user) {
        //do something      
            }

        });
}

1 个答案:

答案 0 :(得分:0)

现在效果很好。我忘记按照下面的代码在 user.action.js 文件中传递变量user_rec

function getAll(user_rec) {
    return dispatch => {
        dispatch(request(user_rec));

        userService.getAll(user_rec)
            .then(
                users => dispatch(success(users)),
                error => dispatch(failure(error.toString()))
            );
    };