2

我从“react-google-login”获得了用户的 google 登录信息

我想使用 react-redux 存储这些信息。

登录成功时调用“responseGoogle”函数。

在此函数中，使用 (react-google-login) 的响应创建结构

并将这个结构保持在组件的状态中。

并调用模块的函数'onChangeUser'来改变Store的状态。

但是当调用“responseGoogle”时，检测到错误。

错误

原因是容器中的道具未定义..在组件中

这是组件

const GoogleLoginButton = ({ onChangeUser }) => {
    const [user, setUser] = useState(null);
    
    const responseGoogle = response => {
        const newUser = {
            googleId: response.profileObj.googleId,
            username: response.profileObj.name,
            token: response.accessToken,
        }  
        setUser(newUser);
        onChangeUser(newUser);
    };

    const responseError = response => {
        console.log(response);
    }

    return (
        <GoogleLogin 
            clientId={CLIENTKEY}
            onSuccess={responseGoogle}
            onFailure={responseError}
        />
    );
}
export default GoogleLoginButton;

这是容器

const GoogleLoginButtonContainer = () => {
    const dispatch = useDispatch();
    const { user } = useSelector(({ auth }) => ({
        user: auth.user
    }));

    const onChangeUser = value => {
        dispatch(
            changeField({
                key: 'user',
                value: value,
            })
        );
    }

    useEffect(() => {
        dispatch(initializeForm('login'))
    }, [dispatch]);

    return (
        <GoogleLoginButton onChangeUser={onChangeUser} user={user} /> 
    );
}

export default GoogleLoginButtonContainer;

这是模块

    const CHANGE_FIELD = 'auth/CHANGE_FIELD';
    const INITIALIZE_FORM = 'auth/INITIALIZE_FORM'

    export const changeField = createAction(
        CHANGE_FIELD,
        ({ key, value }) => ({ key, value })
    );

    export const initializeForm = createAction(
        INITIALIZE_FORM,
        user => user
    )

    const initialState = {
        user: {
            googleId: '',
            username: '',
            token: '',
        }
    };

    const auth = handleActions(
        {
            [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
                ...state,
                [key]: value,   
            }),
            [INITIALIZE_FORM]: (state, { payload: user }) => ({
                ...state,
                [user]: initialState[user]
            })
        
        },
        initialState
    );
    export default auth;
4

0 回答 0