在react-redux中使用钩子时出现错误

Question

我有一个应用程序，您可以在其中添加和删除产品，以及这些产品显示在页面上。一个对象数组处于这种状态。使用Usedispatch钩子，我删除并添加了一个数组元素。使用UserSelector钩子，我获得状态并将所有数组元素呈现到页面。但是我得到了一个错误:"React检测到CatalogProducts调用的Hooks的顺序发生了变化。"如果不修复，这将导致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

Answer 1

不能这样使用组件

ProductCard(prod, index)

应该是

<ProductCard product={prod} index={index} />

声明应该是这样的:

const ProductCard = ({ product, index }) => {