Question

您好，我正在建立购物车，并在IE上遇到问题。（请注意，其他浏览器都可以正常工作）。

所以我的问题是针对：我的购物车中有5件物品，我点击了1件物品上的删除物品。我刷新页面，但该项目仍然存在。当我在数据库中检查该项目时，该项目不再存在，因此将其删除。那么，为什么我仍然看到页面上已删除的那个项目？这仅在IE中发生。

我的组件看起来像这样

class Cart extends Component {
  componentDidMount() {
     console.log('executed') //I get executed in the console so that works.
     this.props.fetchCart();
  }

  removeItem(productId) {
    this.props.dispatch(removeItem(productId));
  }

  render() {
    return (
            <ul className='list-item'>
                {
                    cart.items.map((item, index) => {
                        return (
                            <li className='list-group-item d-flex justify-content-between align-items-center' key={index}>
                                <img style={{ width: '150px', height: '100px' }} src={item.main_img} />
                                <h5>{item.title}</h5>
                                <small>quantity {item.quantity}</small>
                                <small>Price ${item.price}</small>
                                <button
                                    onClick={() => this.removeItem(item.product_id)}>Remove</button>
                            </li>
                        )
                    })
                }
            </ul>
    )
  }
}

const mapStateToProps = (state) => {
 console.log(state.cart) //Always get 5 items instead of 4 which I should get 4 cause I deleted 1
return {
    cart: state.cart
 }
}

const mapDispatchToProps = (dispatch) => {
   return bindActionCreators({ dispatch, rmAlert }, dispatch);
 }

 export default connect(mapStateToProps, mapDispatchToProps)(Cart);

我对fetchCart的传奇：

 import { call, put, takeLatest } from 'redux-saga/effects';
 import { FETCH_CART } from '../../constants/cart';
 import { fetchedCartSuccessful, fetchedCartError} from 
 '../../actions/cart';
 import axios from 'axios';

 function* fetchCart() {
  try {
   const response = yield call([axios, axios.get], '/api/cart');

   yield put(fetchedCartSuccessful(response.data));
  } catch (e) {
   yield put(fetchedCartError(e.response.data));
  }
 }

 export function* watchFetchCart() {
   yield takeLatest(FETCH_CART, fetchCart);
 }

和我对removeItem的传奇

 import { call, put, takeLatest } from 'redux-saga/effects';
 import { showAlert, rmAlert } from '../../actions/alert';
 import { REMOVE_ITEM_IN_CART } from '../../constants/cart';
 import { fetchCart } from '../../actions/cart';
 import axios from 'axios';

function* removeItemInCart(action) {
  yield put(rmAlert());

let alert = {};

try {
    const response = yield call([axios, axios.post], '/cart/remove-item', {
        productId: action.productId
    });

    alert.alertClass = 'alert-success';
    alert.msg = response.data.success.msg;

    yield put(fetchCart());
    yield put(showAlert(alert));
} catch (e) {
    alert.alertClass = 'alert-info';
    alert.msg = e.response.data.error.msg;

    yield put(showAlert(alert));
  }
}

export function* watchRemoveItemInCart() {
  yield takeLatest(REMOVE_ITEM_IN_CART, removeItemInCart)
}

在后端，我从mysql数据库中获取购物车并将其发送回响应。我console.log（'executing'）以确保它正在执行并且控制台中没有显示console.log？我不知道是怎么回事。同样，它可以在chrome和Firefox上正常运行。

  app.get('/api/cart', (req, res) => {
    const userId = req.signedCookies['user_cookie'];
    console.log('executing'); //no console log saying this executed ?

    const sql = `SELECT *, cart.quantity * products.price as price
    FROM cart
    LEFT JOIN products ON products.product_id = cart.product_id
    WHERE user_id='${userId}'`;

    connection.query(sql, (err, result, fields) => {
        if (err) {
            return res.status(500).json({
                error: {
                    msg: 'Something went wrong, couldn\'t GET cart'
                }
            });
        }

        let cart = { quantity: 0, total: 0, items: [] };

        result.map(item => {
            cart.quantity += item.quantity;
            cart.total += item.price;
            cart.items.push(item);
        });
        console.log(cart);
        res.setHeader('content-type', 'text/javascript');
        res.send(cart);
    });
});

如何检查购物车中应该有多少个物品？我在下面通过访问这条路线来做到这一点

 app.get('/all-carts', (req, res) => {
   console.log(req.signedCookies['user_cookie'])
   const sql = `SELECT * FROM cart`;

   connection.query(sql, (err, results, feilds) => {
    console.log(results);
    res.setHeader('content-type', 'text/javascript');
    res.send(results);
 });
});

我访问了这条路线，并且收到了包含4个项目的数组的响应，原因是删除了1个。如果删除所有项目，则会看到一个空数组。但是，当我查看购物车页面时，仍然看到5个项目还在显示吗？

更新-当我清除浏览器历史记录时，它显示购物车中物品的正确数量，为什么我必须清除浏览器历史记录才能在IE上看到任何更新？

Answer 1

尝试将标头{'pragma'：'no-cache'}或{'Cache-Control'：'no-cache'}添加到axios获取请求调用中

仍使用IE显示页面上不存在的旧数据

1 个答案: