Question

我无法在组件中显示从redux存储中获取的数据。

有人可以帮我解决这个问题吗？

错误：

错误：对象作为React子对象无效（找到：带有键的对象 {id，名称，浮动，价格，id_sub，子类别，id_types，类型，id_ext，外观，img，说明}）。如果您打算呈现一个孩子，请改用数组。

我的容器：

{
  categories: [
    category-a: [ file-1, file-2 ],
    category-b: [ file-3 ]
  ]
}

我的减速器：

import React from "react";
// nodejs library that concatenates classes
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons

// core components
import styles from "../assets/cardStyle";
import { useDispatch, useSelector } from "react-redux";
import {useEffect, useCallback} from "react";
import { getAllProducts } from '../store/actions/fetch/index'
const useStyles = makeStyles(styles);

export default function Cards() {

    const classes = useStyles();

    const dispatch = useDispatch();

    const loadProducts= useCallback(() => {
        /**
         * first call pass dispatch as the first argument
         */ 
        getAllProducts(dispatch);
    }, [dispatch, getAllProducts]);

    useEffect(() => {
        loadProducts();
        }, [loadProducts]);

     const products = useSelector (state => state.data.filteredProducts);

        products.map(product=>(
            <Grid container direction="row" >
                <Grid item xs={3}>
                    <Card className={classes.card}>
                        <CardContent className= {classes.cardCarousel}>
                            <Typography variant="body2" color="textSecondary" component="p">
                                This impressive paella is a perfect party dish and a fun meal to cook together with your
                                guests. Add 1 cup of frozen peas along with the mussels, if you like.
                            </Typography>
                        </CardContent>
                    </Card>

                </Grid>
            </Grid>
    ))

    return (
        <Container fixed>
            {products}
        </Container>
        );
}

Answer 1

const products = useSelector (state => state.data.filteredProducts);
products.map(product=>( ....
....

  {products}

方法.map()不会改变源数组，但会返回新数组。因此，在最底部，您呈现的原始数据来自Redux。

要解决此问题，您可以将.map()放在return块中：

return (
    <Container fixed>
        {products.map(product=>(
        <Grid container direction="row" >
            <Grid item xs={3}>
                <Card className={classes.card}>
                    <CardContent className= {classes.cardCarousel}>
                        <Typography variant="body2" color="textSecondary" component="p">
                            This impressive paella is a perfect party dish and a fun meal to cook together with your
                            guests. Add 1 cup of frozen peas along with the mussels, if you like.
                        </Typography>
                    </CardContent>
                </Card>
            </Grid>
        </Grid>}
    </Container>
);

React：对象作为React子对象无效

1 个答案: