Question

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

这是似乎会产生错误的文件：

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;

这是我的data.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

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

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

然后将渲染列表更改为此：

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

Answer 2

在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是在其解析或被拒绝时调用的回调，因此您会看到应有的需求正在呈现，而您无法呈现诺言< / p>

Answer 3

它可以工作，但是为什么要导入json数据，则使用axios插入的导入。 Axios documentation

您的组件将类似于

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 4

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

对象作为React子对象无效（找到：[object Promise]）。如果要渲染子级集合，请改用数组

4 个答案: