Между отправлениями была обнаружена мутация состояния
У меня возникла проблема, которую я не понимаю. Я получаю ошибку инварианта, которая говорит, что произошла мутация состояния, но в очень неудобном месте
В основном у меня есть эта страница:
и на этой странице всякий раз, когда вы нажимаете на кнопку Details на некоторых заказах, вы перенаправляетесь на эту страницу:
Здесь все работает прекрасно, но когда вы решаете перейти с этой страницы на главную страницу:
import React, { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Row, Col } from "react-bootstrap";
import Product from "../components/Product";
import Loader from "../components/Loader";
import Message from "../components/Message";
import { listProducts } from "../actions/productActions";
function HomeScreen() {
const dispatch = useDispatch();
const productList = useSelector((state) => state.productList);
const { error, loading, products } = productList;
useEffect(() => {
dispatch(listProducts());
}, [dispatch]);
return (
<div>
<h1>Latest Products</h1>
{loading ? (
<Loader />
) : error ? (
<Message variant="danger">{error}</Message>
) : (
<Row>
{products.map((product) => (
<Col key={product._id} sm={12} md={6} lg={4} xl={3}>
<Product product={product} />
</Col>
))}
</Row>
)}
</div>
);
}
export default HomeScreen;
Вы получаете ошибку Invariant failed в строке 13, где я пытаюсь диспетчеризировать метод listProducts.
Не так давно у меня была ситуация с этой ошибкой, мне удалось ее исправить, потому что я использовал прямое обновление состояния. Я понимаю, почему я получал эту ошибку раньше, но в этот раз я в еще большем замешательстве, чем раньше, потому что в этот раз я буквально не касаюсь никакого значения в любом месте состояния, я просто отображаю его. Я проверил бэкенд и не получил там никаких ошибок, что означает, что это строго проблема React. Я не понимаю, почему проблема возникает только тогда, когда я пытаюсь перейти от деталей к главному экрану.