我有一个应用程序，你可以在其中添加和删除产品，以及这些产品显示在页面上。一个对象的数组是在状态。使用Usedispatch挂钩，我删除和添加一个数组元素。使用UserSelector挂钩，我得到状态，并呈现所有数组元素到页面。但我得到一个错误：“React检测到CatalogProducts调用的挂钩顺序发生更改。如果不修复，将导致Bug和错误。”
我希望当一个元素被添加到状态中时，它会和其他元素沿着显示在页面上。
`

import React from 'react';
import {useSelector} from "react-redux";
import ProductCard from "./ProductCard";

const CatalogProducts = () => {

    const newCatalog = useSelector((state) => state)

    return (
        <div>
            {newCatalog.catalog.map((prod, index) => ProductCard(prod, index))}
        </div>
    );
};

export default CatalogProducts;

import React from 'react';
import {useDispatch} from "react-redux";
import {addProductAction} from "../action/productsAction";
import {ConfigProduct} from "../Utils/configProduct";
import '../css/popup.css'
import '../css/flex.css'
import {Button} from "react-bootstrap";

const CreateProduct = () => {

    const dispatch = useDispatch()
    const newProduct = new ConfigProduct()

    function addProd() {
        dispatch(addProductAction(newProduct))
    }

    return (
            <div className = "popup">
                <h2  style={{textAlign: "center", color: "red"}}>New product</h2>
                <input className="item" placeholder="id" onChange={e => newProduct.idProd = e.target.value}/>
                <input className="item" placeholder="info" onChange={e => newProduct.name = e.target.value}/>
                <input className="item" placeholder="price" onChange={e => newProduct.infoProd = e.target.value}/>
                <input className="item" placeholder="date" onChange={e => newProduct.price = e.target.value}/>
                <input className="item" placeholder="enter url" onChange={e => newProduct.date = e.target.value}/>
                <p>
                    <Button onClick={addProd}>Add</Button>
                </p>
            </div>
    );
};

export default CreateProduct;

import React from 'react';
import {Button, Card} from 'react-bootstrap';
import "../css/card.css"
import {useDispatch} from "react-redux";
import {removeProductAction} from "../action/productsAction";

const ProductCard = (product, index) => {

    const Dispatch = useDispatch()

    function deleteProd() {
        Dispatch(removeProductAction(index))
    }

    return (
        <Card style={{ width: '18rem'}} className="m-2" key={index}>
            <Card.Body className="bg-success text-white card" border="primary">
                <img src={product.imgSrc} alt={'product'}/>
                <Card.Subtitle className="mb-2" style={{ fontSize: 16 }}>Name: {product.name}</Card.Subtitle>
                <Card.Subtitle className="mb-2" style={{ fontSize: 14 }}>Info: {product.infoProd}</Card.Subtitle>
                <Card.Subtitle className="mb-2">Price: {product.price} $</Card.Subtitle>
                <Card.Subtitle className="mb-2" style={{ fontSize: 10 }}>{product.date}</Card.Subtitle>
            <Button variant="danger" onClick={deleteProd}>delete</Button>
            </Card.Body>
        </Card>
    );
};

export default ProductCard;

import {ADDPRODUCTS, REMOVEPRODUCTS} from "../action/productsAction";

function productsReducer (state, action)
{
    switch (action.type){
        case ADDPRODUCTS:
            return {...state, state: state.catalog.push(action.payload)}
        case REMOVEPRODUCTS:
            return {...state, state: state.catalog.splice(action.payload, 1)}
        default:
            return state
    }
}
export default productsReducer

export const ADDPRODUCTS = 'addProductsAction'
export const REMOVEPRODUCTS = 'removeProduct'

export const addProductAction = addProducts =>(
    {
        type: ADDPRODUCTS,
        payload: addProducts
    })

export const removeProductAction = removeProducts =>(
    {
        type: REMOVEPRODUCTS,
        payload: removeProducts
    })

import productsReducer from "../reducer/productsReducer";
import { legacy_createStore as createStore} from 'redux'
import {ConfigProduct} from "../Utils/configProduct";

const initialState = {
    catalog: [
        new ConfigProduct(1, "Book", "Big", 20, "20.01.2022", "../Utils/img/1.jpg"),
        new ConfigProduct(2, "Table", "Black", 25, "20.01.2022", "../Utils/img/2.jpg"),
        new ConfigProduct(3, "Window", "White", 30, "20.01.2022", "../Utils/img/3.jpg"),
        new ConfigProduct(4, "Apple", "Green", 35, "20.01.2022", "../Utils/img/4.jpg")]
}

const store = createStore(productsReducer, initialState)

export default store

`