在redux react中重新渲染组件后css没有更新

Question

我正在尝试使用 React 创建网页。 使用 redux 进行数据访问。

我的问题是，当我点击任何产品时，它会显示一个完美的页面，但是如果我返回然后再次单击另一个产品，我的页面会显示新产品的数据，但它并没有改变CSS 中的照片高度。

home page

product 1product 2(its doesnt changing first image height)

export const productDetailsReducer = (state = { product: {} }, action) => {

switch (action.type) {
    case PRODUCT_DETAILS_REQUEST:
        return {
            loading: true,
            ...state     <------i am sending the previous state
        }
    case PRODUCT_DETAILS_SUCCESS:
        return {
            loading: false,
            product: action.payload,
        }
    case PRODUCT_DETAILS_FAIL:
        return {
            loading: false,
            error: action.payload
        }
    case CLEAR_ERRORS:
        return {
            ...state,
            error: null
        }

    default:
        return state
}

Answer 1

您必须先进行迭代，然后再提供更改。

        return {
            ...state     <------ iterate
            loading: true, <----- set new values
        }

此外，您应该始终进行迭代，以确保您不会更改整个状态。

export const productDetailsReducer = (state = { product: {} }, action) => {

switch (action.type) {
    case PRODUCT_DETAILS_REQUEST:
        return {
            ...state
            loading: true,
        }
    case PRODUCT_DETAILS_SUCCESS:
        return {
            ...state,
            loading: false,
            product: action.payload,
        }
    case PRODUCT_DETAILS_FAIL:
        return {
            ...state,
            loading: false,
            error: action.payload
        }
    case CLEAR_ERRORS:
        return {
            ...state,
            error: null
        }

    default:
        return state
}