[英]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.