[英]React: objects are not valid as a React child
我无法在组件中显示从 redux 存储中获取的数据。
有人可以帮我解决这个问题吗?
错误:
错误:对象作为 React 子对象无效(发现:对象的键为 {id、name、float、price、id_sub、subcategory、id_types、type、id_ext、external、img、description})。 如果您打算渲染一组子项,请改用数组。
我的容器:
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;
}
}
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>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.