注册后不显示用户名字

Question

我正在构建一个 React 和 Node.js 应用程序。在前端，当用户登录时，他们会从 /login 路由定向到根路由，并会收到他们的名字，但是，当用户注册时，会从 /register 路由定向到根路由，不显示名字。

登录.js

const Login = ({history}) => {
    //Return jsx code
const dispatch = useDispatch();
const navigate = useNavigate();

    const [email, setEmail] = useState('[email protected]');
    const [password, setPassword] = useState('test');

    const submitForm = (e) => {

        e.preventDefault()
        dispatch(login({email, password}, history))
        navigate("/")
    }

注册.js

const Register = ({ history }) => {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');
    const [gender, setGender] = useState('male');
    const [password, setPassword] = useState('');
    
    const submitForm = (e) => {

        e.preventDefault()

        dispatch(register({ firstName, lastName, email, gender, password}, history))
        navigate("/")
    }

authServices.js

const AuthService = {

    login: (data) => {
        return API.post('/login' , data)
        .then(({data}) => {
            API.defaults.headers['Authorization'] = `Bearer ${data.token}`;
            return data
        })
        .catch(err => {
            console.log("Auth service err" ,err)
            throw err
        })
    },

    register: (data) => {
        return API.post('/register', data)
        .then(({ data }) => {
            API.defaults.headers['Authorization'] = `Bearer ${data.token}`;
            return data
        })
        .catch(err => {
            console.log("Auth service err" ,err)
            throw err
        })
    }

Chat.js

const Chat = () => {
    //Return jsx code

    const user = useSelector(state => state.authReducer.user)
    // console.log(user)

    return (
    <div>
        <h1>Chat screen</h1>
        <p>Welcome, {user.firstName}</p>
    </div>
    );
}

auth.js

export const login = (params, history) => dispatch => {
    return AuthService.login(params)
    .then(data => {
        dispatch({type: LOGIN, payload: data})
        history.push("/")
    })
    .catch(err => {
        console.log(err);
    });
}

export const register = (params, history) => dispatch => {
    return AuthService.register(params)
    .then(data => {
        dispatch({type: REGISTER, payload: data})
        history.push('/')
    })
    .catch(err =>{
        console.log(err);
    });
}

auth.js

const authReducer = (state = initialState, action) => {

const {type, payload } = action

switch (type) {
    case LOGIN:
        return {
            ...state,
            user: payload,
            token: payload.token,
            isLoggedIn: true
        }

        case REGISTER:
        return {
            ...state,
            user: payload,
            token: payload.token,
            isLoggedIn: true
        }

        default: {
            return state
        }
}

}

我尝试了不同的方法来解决这个问题，但似乎都不起作用。 为什么登录时显示名字，但注册时不显示名字？

Answer 1

您还应该提供 store.js 文件来查看如何设置密钥，但我建议您修改

Chat.js

文件，因为您似乎在商店中访问了错误的密钥：

const user = useSelector(state => state.user)