1

我是一名 PHP/Laravel 中级开发人员。在react.js方面，我完全是个菜鸟。现在我知道当涉及到 laravel 后端时，React 使用 API 和其他东西来显示数据。我习惯了传统的HTML、CSS、JS、Bootstrap、Ajax等等。我有一个简单的任务是通过 laravel 后端登录用户。我已经为该任务创建了 API，它们工作得非常好，不知何故，我很幸运，并附上了这些 API ALL BY MYSELF（当然还有一点研究）。现在，每当我尝试登录时，我都会通过 axios 请求接收到后端的常规数据并将其保存在一个变量signInUser中。现在，当我尝试将该数据传递给其他操作函数时，它正在运行undefined不知何故。这是我的代码，以便您了解我想要实现的目标：

组件\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...
    );
}

行动\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
    }
};

减速器\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;
    }
}

Ps：这是一个购买的 react.js 模板（不是我的代码）。

4

0 回答 0