reactjs - 从 Redux 状态中提取属性返回未定义，尽管它肯定有一个值

Question

这周我一直在制作一个小应用程序来学习如何使用 React 和 Redux，进展顺利，但这个问题让我摸不着头脑。

这是我的 reducer 的样子。

const initialiseState = {
  items: {},
  total: 0
}

function basket(state = initialiseState, action) {

  switch (action.type) {
    case ADD_TO_BASKET:
      if(action.sku){
        const quantity = state.items[action.sku] || 0;
        return {
          items: {...state.items, [action.sku]: quantity + 1},
          total:  parseInt(state.total,10) + parseInt(action.price, 10)
        };
      return state
    }

    case REMOVE_FROM_BASKET:
      if(action.sku) {

        // const {[action.sku]: quantity, ...items } = state.items;

        const quantity  = state.items[action.sku];
        const { items } = state;
        if(quantity && quantity > 1) {
          const x = {
            items: {...state, [action.sku]: quantity - 1},
            total: parseInt(state.total,10) - parseInt(action.price, 10)
          };
          console.log(x)
          return;
        } else {
          return state;
        }
      } else {
        return state;
      }
    default:
      return state;
  }
}

我对 ADD_TO_BASKET 没有任何问题，但是当我尝试从购物篮中删除商品时，quantity 返回为未定义。我在代码提取该值的位置放置了一个调试器，当我在控制台中运行 state.items[action.sku] 时，它会返回该值。

我刚刚留下了调试代码，但您应该明白我正在尝试做的事情的要点。

我不确定您需要查看代码的哪些其他部分，以便我可以根据需要更新问题。

编辑:这是我开始调试之前的原始 reducer 代码，以及操作文件。

import { combineReducers } from 'redux'
import {
  ADD_TO_BASKET,
  REMOVE_FROM_BASKET
} from './actions'

const initialiseState = {
  items: {},
  total: 0
}

function basket(state = initialiseState, action) {

  switch (action.type) {
    case ADD_TO_BASKET:
      if(action.sku){
        const quantity = state.items[action.sku] || 0;
        return {
          items: {...state.items, [action.sku]: quantity + 1},
          total:  parseInt(state.total,10) + parseInt(action.price, 10)
        };
      return state
    }

    case REMOVE_FROM_BASKET:
      if(action.sku) {
        const {[action.sku]: quantity, ...items } = state.items;
        if(quantity && quantity > 1) {
          return {
            items: {...state, [action.sku]: quantity - 1},
            total: parseInt(state.total,10) - parseInt(action.price, 10)
          };
        } else {
          return state;
        }
      } else {
        return state;
      }
    default:
      return state;
  }
}

const coffeeApp = combineReducers({
  basket,
})

export default coffeeApp

actions.js

/*
 * action types
 */

export const ADD_TO_BASKET      = 'add to basket'
export const REMOVE_FROM_BASKET = 'remove from basket'
export const ADD_PRODUCTS       = 'add products json to state'

/*
 * action creators
 */

export function addToBasket(sku, price) {
  return { type: ADD_TO_BASKET, sku, price }
}

export function removeFromBasket(sku, price) {
  return { type: REMOVE_FROM_BASKET, sku, price }
}

export function addProducts(products) {
  return { type: ADD_PRODUCTS, payload: products }
}

编辑 2:修复了 reducer 中错误放置的返回语句和大括号。

代码正在到达 REMOVE_FROM_BASKET 语句，如您所见 here at this break point 。并且 quantity 变量未定义。但是，当在控制台中时，我可以提取值 here is a screen shot of the console

Answer 1

您在 console.log(x) 语句之后没有返回任何内容。这就是为什么您看到未定义的原因。尝试将这部分代码更新为:

...
if(quantity && quantity > 1) {
  const x = {
    items: {...state, [action.sku]: quantity - 1},
    total: parseInt(state.total,10) - parseInt(action.price, 10)
  };
  console.log(x)
  return x; // <<--- returning new state here!
} else {
  return state;
}
...