对象作为 React 子项无效(找到:[对象 Promise]).如果要呈现子项集合，请改用数组

Question

我正在尝试从 json 文件导入数据并渲染图像列表。但是我收到一个错误说：对象作为 React 子项无效（找到：[对象承诺]）。如果要呈现子项集合，请改用数组。

这是似乎生成错误的文件：

import React from 'react';
import Product from "./Product/index";
const ProductList = () => {
    const renderedList = import("../../../data/data.json").then(json 
    => json.goods.map(image => {
        return <div><Product images={image.pictures} /></div>
    }
));
    return <div>{renderedList}</div>
}
export default ProductList;

这是我的数据.json文件：

{
"goods": [
    {
        "id": "1",
        "name": "Cat Tee Black T-Shirt",
        "prices": "$ 10.90",
        "pictures": "120642730401995392_1.jpg",
        "size": "",
        "quantity": ""    
    },
    {
        "id": "2",
        "name": "Dark Thug Blue-Navy T-Shirt",
        "prices": "$ 29.45",
        "pictures": "51498472915966370_1.jpg",
        "size": "",
        "quantity": ""    
    }]
}

这是我的产品组件：

import React, { Component } from "react";
import Thumb from "../../../Thumb/index";
const Product = props => {
        return (
            <div className="shelf-item">
                <div className="shelf-stopper">Free shipping</div>
                <Thumb 
                    classes="shelf-item__thumb"
                    src={props.images}
                />
                <p className="shelf-item__title">product</p>
                <div className="shelf-item__price">
                    productInstallment  
                </div>
                <div className="shelf-item__buy-btn">Add to cart</div>
            </div>
        );
    }
export default Product;

有人可以帮我弄清楚吗？多谢！

Answer 1

在您的 productList 组件中，您使用的是 promise 而不是渲染子组件，为了克服这个问题，您可以使其成为有状态组件

，例如：

import React, { Component } from 'react';
import Product from "./Product/index";
class ProductList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      goods: []
    }
  }
  componentDidMount = () => {
    import("../../../data/data.json")
      .then(json => this.state({ goods: json.goods }))
  }
  render() {
    const { goods } = this.state
    return (
      <div>
        {goods.map(image => <div><Product images={image.pictures} /></div>)}
      </div>
    )
  }
}
export default ProductList;

或者，您也可以在开头导入它，例如：

import React from 'react';
import Product from "./Product/index";
import goods from "../../../data/data.json"
const ProductList = () => {
  const renderedGoods = goods.map(image => {
    return <div><Product images={image.pictures} /></div>
  })
  return <div>{renderedGoods}</div>
}
export default ProductList;

不是问题，是的，您正确解决了承诺，

但是，即使您在控制台中输入，您实际返回的也是一个承诺，而.then或.catch是在解决或拒绝时调用的回调，因此您看到React Want是要渲染的东西，而您无法呈现承诺

Answer 2

它有效，但为什么要导入 json 数据使用 axios 而不是导入。公理文档

您的组件将如下所示

import React, { Component } from 'react';
import axios from 'axios';
import Product from "./Product/index";
class ProductList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      products: []
    }
  }
  componentDidMount = () => {
    axios.get("products.json").then(json => {
        this.setState({ products: json.data.goods });
    });
  }
  render() {
    const { products } = this.state
    return (
      <div>
        {products.map(image => <div><Product images={image.pictures} /></div>)}
      </div>
    )
  }
}
export default ProductList;

将 JSON 或数据文件保存在公用文件夹中

我希望这对你有用

Answer 3

只需使用map或过滤器函数，因为您尝试渲染的Array是一个对象数组，并且由于多次重新渲染而无法渲染这些对象，因此React DOM不允许这样做。

Answer 4

关闭 - 将导入移动到文件顶部：

import myData from "../../../data/data.json";

然后将呈现的列表更改为以下内容：

const renderedList = myData.goods.map(image => (<div><Product images={image.pictures} /></div>));