使用 javascript 解構重新分配變量的值

Question

 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 塊之前聲明值：

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

我得到錯誤：

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

Answer 1

關於您的第一個錯誤：您在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;   
    }
}

如果您在分派REGISTER或LOGIN操作時仍然看到action.data未定義的錯誤，則該操作本身不會正確填充數據字段（這意味着我們對您的操作 object 的假設是錯誤的......）

* 編輯 2 *

回答您的后續問題：案例陳述中的花括號確實創建了額外的范圍。 否則所有變量的 scope 是switch (...) {...} -block。 如果您要在同一個 scope 中定義所有案例，您可能會在變量名中發生沖突。