React：对象作为 React 子项无效

Question

我在组件中显示从我的 redux 存储中获取的数据时遇到问题。

谁能帮我解决这个问题？

错误：

Error: Objects are not valid as a React child (found: object with keys {id, name, float, price, id_sub, subcategory, id_types, type, id_ext, exterior, img, description}). If you meant to render a collection of children, use an array instead.

我的容器：

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>
        );
}

我的减速器：

import {FETCH_FAIL, FETCH_SUCESS, FETCH_LOADING} from '../../actions/fetch/actionType';

const initialState = {
    loading: false,
    products: [],
    filteredProducts: [],
    fn:[],
    mw:[],
    ft:[],
    ww:[],
    bs:[],
    stattrek:[],
    normal:[],
    error: null
  };

  export default function productReducer(state = initialState, action) {
    switch (action.type) {
      case FETCH_LOADING:
        return {
          ...state,
          loading: true
        };
      case FETCH_SUCESS:
        return {
          ...state,
          loading: false,
          error: null,
          filteredProducts: action.data.listProducts,
          products: action.data.listProducts,
          fn: action.data.fn,
          mw: action.data.mw,
          ft: action.data.ft,
          ww: action.data.ww,
          bs: action.data.bs,
          stattrek: action.data.listProducts.filter(value=> value.id_types === 1),
          normal: action.data.listProducts.filter(value=> value.id_types === 2)
        };
      case FETCH_FAIL:
        return {
          ...state,
          loading: false,
          error: action.error
        };
      default:
        return state;
    }
  }

Answer 1

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

  {products}

方法 .map() 不会改变源数组，而是 returns 新数组。所以在最底部，你渲染的原始数据来自 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 子项无效

React: objects are not valid as a React child

reactjs

react-hooks