Question

我是PHP / Laravel中级开发人员。对于 react.js ，我完全是个菜鸟。现在我知道当涉及到laravel后端时，react使用API和东西来显示数据。我习惯了传统的 HTML，CSS，JS，Bootstrap，Ajax 等。我有一个简单的任务，可以通过laravel后端通过反应登录用户。我已经为该任务创建了API，并且它们运行良好，并且我很幸运地将这些API附加到 ALL BY MYSELF（当然，还需要进行一些研究）。现在，无论何时尝试登录，我都会通过axios请求后端接收常规数据，并将其存储在变量signInUser中。现在，当我尝试将数据传递给其他动作函数时，它会以某种方式undefined进行传递。这是我的代码，以便您可以了解我正在尝试实现的目标：

Components \ SignIn.js

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

componentDidUpdate() {
     if (this.props.showMessage) {
         setTimeout(() => {
             this.props.hideMessage();
         }, 100);
     }
     if (this.props.authUser !== null) {
         this.props.history.push('/');
     }
}

render() {
    const {email, password} = this.state;
    const {showMessage, loader, alertMessage} = this.props;
    return (
        // other components and stuff...
        <Button onClick={() => { this.props.showAuthLoader(); this.props.userSignIn({email, password});}} variant="contained" color="primary">
            <IntlMessages id="appModule.signIn"/>
        </Button>
    );
}

const mapStateToProps = ({auth}) => {
    const {loader, alertMessage, showMessage, authUser} = auth;
    return {loader, alertMessage, showMessage, authUser}
};

export default connect(mapStateToProps, {
    userSignIn,
    hideMessage,
    showAuthLoader
})(SignIn);

Sagas \ Auth.js

const signInUserWithEmailPasswordRequest = async (email, password) =>
    await axios.post('auth/login', {email: email, password: password})
    .then(authUser => authUser)
    .catch(err => err);

function* signInUserWithEmailPassword({payload}) {
    const {email, password} = payload;
    try {
        const signInUser = yield call(signInUserWithEmailPasswordRequest, email, password);
        if (signInUser.message) {
            yield put(showAuthMessage(signInUser.message));
        } else {
            localStorage.setItem('user_id', signInUser.data.user.u_id);
            yield put(userSignInSuccess(signInUser.data.user.u_id));
        }
    } catch (error) {
        yield put(showAuthMessage(error));
    }
}

export function* signInUser() {
    yield takeEvery(SIGNIN_USER, signInUserWithEmailPassword);
}

export default function* rootSaga() {
    yield all([fork(signInUser),
    // couple of other functions...
    );
}

actions \ Auth.js

export const userSignIn = (user) => {
    return {
        type: SIGNIN_USER,
        payload: user
    };
};

export const userSignInSuccess = (authUser) => {
    console.log(authUser); // It's printing undefined, I don't know why?!
    return {
        type: SIGNIN_USER_SUCCESS,
        payload: authUser
    }
};

reducers \ Auth.js

const INIT_STATE = {
    loader: false,
    alertMessage: '',
    showMessage: false,
    initURL: '',
    authUser: localStorage.getItem('user_id'),
};

export default (state = INIT_STATE, action) => {
    switch (action.type) {
        case SIGNIN_USER_SUCCESS: {
            return {
                ...state,
                loader: false,
                authUser: action.payload
            }
        }

        case INIT_URL: {
            return {
                ...state,
                initURL: action.payload
            }
        }

        default:
            return state;
    }
}

建议：这是购买的react.js模板（不是我的代码）。

有效载荷未定义

0 个答案: