Reactjs 有效载荷未定义_Reactjs_Redux_Axios_Redux Saga_Laravel Api

Reactjs 有效载荷未定义

reactjs redux

Reactjs 有效载荷未定义,reactjs,redux,axios,redux-saga,laravel-api,Reactjs,Redux,Axios,Redux Saga,Laravel Api,我是一名PHP/Laravel中级开发人员。说到react.js，我完全是个傻瓜。现在我知道react使用API和其他东西来显示laravel后端的数据。我习惯了传统的HTML、CSS、JS、Bootstrap、Ajax等等。我有一个简单的任务，通过laravel后端从react登录用户。我已经为这项任务创建了API，它们工作得非常好，不知何故，我很幸运，自己附加了这些API（当然，还有一些研究）。现在，每当我尝试登录时，我都会通过axios对后端的请求接收常规数据，并将其保存在变量signIn

我是一名PHP/Laravel中级开发人员。说到react.js，我完全是个傻瓜。现在我知道react使用API和其他东西来显示laravel后端的数据。我习惯了传统的HTML、CSS、JS、Bootstrap、Ajax等等。我有一个简单的任务，通过laravel后端从react登录用户。我已经为这项任务创建了API，它们工作得非常好，不知何故，我很幸运，自己附加了这些API（当然，还有一些研究）。现在，每当我尝试登录时，我都会通过axios对后端的请求接收常规数据，并将其保存在变量

signInUser

中。现在，当我试图将该数据传递给其他动作函数时，不知何故，它将

未定义。以下是我的代码，以便您了解我试图实现的目标：
组件\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);

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

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
    }
};

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;
    }
}

actions\Auth.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);

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

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
    }
};

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;
    }
}

reducers\Auth.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);

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

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
    }
};

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;
    }
}

p.s：这是一个购买的react.js模板（不是我的代码）。
哦，你是说signInUser
未定义，还是说你的SignIn组件中使用了connect
；如果是那样的话，你能再多给我看一点吗？我猜您遇到的错误不是由于您的代码造成的posted@Patrick是的，它正在使用connect
。很抱歉，我没有发布代码。我正在用更多的代码更新我的问题。请查收。谢谢。不，登录用户
不是未定义的
。它有{email:'some email'，password:'some password'}
。但是当我尝试使用yieldput（usersigninsaccess（signInUser.data.user.u_id））发送时操作中的操作\Auth.js正在接收未定义的。具体来说：export const usersigninsaccess=（authUser）=>{console.log（authUser）；//打印时没有定义，我不知道为什么？！
我很高兴你能解决它。我可以发布答案，但如果结果是打字错误，就没有太多的答案可以给出，除了在再次遇到类似错误时给出一些如何查找类似错误的提示：）如果你愿意，你也可以自己回答问题并将其标记为答案哦，do您的意思是，signInUser
未定义，或者您究竟在哪个变量上未定义？您是否在您的SignIn组件中使用了connect
；在这种情况下，您能否显示更多的SignIn？我猜您遇到的错误不是由于您的代码造成的posted@Patrick是的，它正在使用连接
。很抱歉，我没有发布该代码。我正在用更多的代码更新我的问题。请检查。谢谢。不，signinguser
不是未定义的。它有{email:'some email'，password:'some password'}
。但是当我尝试使用发送时，会产生put（usersigninsucess（signInUser.data.user.u id））；
action\Auth.js中的操作正在接收未定义的。具体来说：export const usersigninsaccess=（authUser）=>{console.log（authUser）；//打印时未定义，我不知道为什么？！
我很高兴你能解决它。我可以发布答案，但如果结果是打字错误，除了在再次遇到类似错误时提供一些如何查找类似错误的提示外，没有太多答案可以给出：）如果你愿意，你也可以自己回答这个问题并将其标记为答案