时间戳

首页 > 解决方案 > React js将对象转换为数组以供useState

javascript - React js将对象转换为数组以供useState

问题描述

再会！我正在为我的投资组合编写一个网上商店演示。我正在使用 commerce.js 作为后端。当我尝试从商业中获取数据时，问题就来了。它是对映射无效的对象的形式。我尝试了许多将其转换为数组的方法，但没有用。

这是我的 App.js

const App = () => {
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const { data } = await commerce.products.list();

    //setProducts(data);

    console.log(Object.entries(data));

    //Tried Using Object.values and Object.entries but no use.
  };

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

取消注释时setProducts，Reactjs 会抛出一个错误，即对象作为反应子无效。

这是我的控制台的样子：

在此处输入图像描述

这是使用此数据的产品组件

const Product = ({ product }) => {
  //console.log(product);
  const classes = useStyles();
  return (
    <Card className={classes.root}>
      <CardMedia
        className={classes.media}
        image={product.media}
        title={product.name}
      />
      <CardContent>
        <div className={classes.cardContent}>
          <Typography variant="h5" gutterBottom>
            {product.name}
          </Typography>
          <Typography variant="h5">{product.price}</Typography>
        </div>
        <Typography variant="body2" color="textSecondary">
          {product.description}
        </Typography>
      </CardContent>
      <CardActions disableSpacing className={classes.cardActions}>
        <IconButton aria-label="Add to Cart">
          <AddShoppingCart />
        </IconButton>
      </CardActions>
    </Card>
  );
};

标签： javascriptreactjs

解决方案

product.price是一个对象，所以你不能只用它作为一个反应孩子:)

我指的是这一行：

<Typography variant="h5">{product.price}</Typography>

如果您只是将其更改为

<Typography variant="h5">{product.price.formatted}</Typography>

应该没问题

推荐阅读