Question

我正在更改按钮单击操作上的对象数组的状态。当我单击按钮时，它会更改状态并为console.log语句之一抛出未定义的状态，我将在下面的代码中提及。当我再次单击该按钮时，它将显示以下错误

未捕获的TypeError：无法读取未定义的属性“ map” 在stockReducer（stockReducer.js：28）

这是我要设置数据的操作代码。理想情况是以后从后端开始做。

export const getStockAction = () => {
    return (dispatch) => {

        dispatch({ type: GET_STOCK_LOAD, payload: 'Loading...' })
        
        var stockData = [{ productID: 1, stock: 1 }, { productID: 2, stock: 1 }, { productID: 3, stock: 1 }, { productID: 4, stock: 1 }, { productID: 5, stock: 1 }, { productID: 6, stock: 1 }, { productID: 7, stock: 1 }]

        dispatch({ type: GET_STOCK_FETCH, payload: stockData })
        
    };
};

另一个用于更新状态的操作代码。

export const setStockAction = (toggleID) => {
    return (dispatch) => {

        dispatch({ type: SET_STOCK_LOAD, payload: 'Loading...' })
        
        dispatch({ type: SET_STOCK_FETCH, payload: [{ toggleData: 0, toggleID }] })
        
    };
};

减速器

import { GET_STOCK_LOAD, GET_STOCK_FETCH, SET_STOCK_LOAD, SET_STOCK_FETCH } from "../actions/stockActions";

const initialState = {
    getStockIsLoading: false,
    getStock: [],
    setStockIsLoading: false,
}

const stockReducer = (state = initialState, action) => {
    switch (action.type) {
        case GET_STOCK_LOAD:
            return {
                ...state,
                getStockIsLoading: true
            }
        case GET_STOCK_FETCH:
            return {
                ...state,
                getStock: action.payload
            }
        case SET_STOCK_LOAD:
            return {
                ...state,
                setStockIsLoading: true
            }
        case SET_STOCK_FETCH:
            return state.getStock.map(product => {
                if (product.productID === parseInt(action.payload[0].toggleID)) {
                    return { ...product, stock: product.stock = parseInt(action.payload[0].toggleData) }
                }   
                return product
            })
        default: return state
    }
}

export default stockReducer

我从中调用操作的页面以及单击事件以更新状态的页面

const Product = ({ match, getStockData, setStock, getStock }) => {

console.log(getStockData) //the statement which throws undefined after buttonclick 

  var params = match.params

  useEffect(() => {       
    getStock()
  }, [])

const handleTestToggle = (toggleID) => {
    setStock(toggleID)
  }

return (
    <div>
                <Grid container justify="space-between" className={classes.newSection}>
                  <Grid item>
                    <Button onClick={() => handleTestToggle(params.productID)} variant="outlined" color="secondary" >
                      {getStockData && getStockData[params.productID - 1].stock === 1 ? 'available' : 'Unavailable'}
                    </Button>
                  </Grid>
  
const mapStateToProps = state => {
  return {
    getStockData: state.stock.getStock
  }
}

const mapDispatchToPtops = dispatch => {
  return {
    getStock: () => dispatch(getStockAction()),
    setStock: (data) => dispatch(setStockAction(data)),
  }
}

export default connect(mapStateToProps, mapDispatchToPtops)(Product)

单击后如何无法来回更新状态？单击按钮后，它只会更新一次，如果单击按钮，它将为状态抛出未定义的错误

Answer 1

您只返回数组，但是您需要返回整个新状态：

case SET_STOCK_FETCH:
  const newGetStock = state.getStock.map(product => {
                if (product.productID === parseInt(action.payload[0].toggleID)) {
                    return { ...product, stock: product.stock = parseInt(action.payload[0].toggleData) }
                }   
                return product
            });
  return {
    ...state,
    getStock: newGetStock,
  }

更新状态后，Redux状态返回未定义

1 个答案: