对象作为 React 子级无效（找到：\[object Promise\]）。如果您打算渲染一组孩子，请改用数组

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;

有人可以帮我弄清楚吗？非常感谢！

原文由 Aurora 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 想要呈现的东西，而您无法呈现承诺

原文由 warl0ck 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 champion-runner 发布，翻译遵循 CC BY-SA 4.0 许可协议