时间戳

首页 > 解决方案 > 使用javascript解构重新分配变量的值

javascript - 使用javascript解构重新分配变量的值

问题描述

const authReducer =(state= defaultState, action)=>{
    //const {email,firstname,lastname,phone,token} = action.data;
    switch(action.type){
        
        case 'LOGIN': 
        let {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, lastname, phone, token, authenticated: true };

        case 'REGISTER':
        {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, token, authenticated: true };

        case 'LOGOUT':
            return defaultState;

         default:
             return state;   
    }
}
使用上面的代码会抛出错误：

 Parsing error: Unexpected token

有没有一种方法可以解构 action.data 以根据 switch 案例声明变量 email、firstname、lastname...？

如果我尝试像这样在 switch 块之前声明值：

/* ... */
const authReducer =(state= defaultState, action)=>{
    const {email,firstname,lastname,phone,token} = action.data;
    switch(action.type){

        case 'LOGIN': 
        //let {email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, lastname, phone, token, authenticated: true };

        case 'REGISTER':
        //{email,firstname,lastname,phone,token} = action.data;
        return {...state, email, firstname, token, authenticated: true };

        case 'LOGOUT':
            return defaultState;

         default:
             return state;   
    }
}

export default authReducer;

我得到错误：

TypeError: Cannot destructure property 'email' of 'action.data' as it is undefined.

标签： javascriptreactjs

解决方案

关于您的第一个错误：您在这种情况下缺少声明关键字REGISTER：

case 'REGISTER':
        // {email,firstname,lastname,phone,token} = action.data;
        const {email,firstname,lastname,phone,token} = action.data;

关于您的第二个错误：对于某些操作，该字段action.data未定义，因此您无法解构它。坚持你的第一种解构每个案例的行动的方法。

* 编辑 *

const authReducer = (state = defaultState, action) => {
    switch(action.type) {

        case 'LOGIN': {
          const {email,firstname,lastname,phone,token} = action.data;
          return {...state, email, firstname, lastname, phone, token, authenticated: true };
        }

        case 'REGISTER': {
          const {email,firstname,lastname,phone,token} = action.data;
          return {...state, email, firstname, token, authenticated: true };
        }

        case 'LOGOUT':
            return defaultState;

         default:
             return state;   
    }
}

如果您在分派or操作时仍然看到action.data未定义的错误，则说明操作本身不会正确填充数据字段（这意味着我们对您的操作对象的假设是错误的..）REGISTERLOGIN

* 编辑 2 *

回答您的后续问题：案例陈述中的花括号确实创建了额外的范围。否则，所有变量的范围都是switch (...) {...}-block。如果您要在同一范围内定义所有情况，则变量名称可能会发生冲突。

推荐阅读