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

【问题标题】：Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead对象作为 React 子级无效（找到：[object Promise]）。如果您打算渲染一组孩子，请改用数组
【发布时间】：2019-01-17 04:23:55
【问题描述】：

我正在尝试从 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;

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

【问题讨论】：

您能向我们展示您的项目组件吗？
您是指Product 组件吗？当然，我已经添加了。
哦，是的！对不起这是我的错。看代码，渲染imo应该不会出错。

标签： reactjs

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

【讨论】：

感谢您的回答！但是我仍然有点困惑，you are using a promise instead of rendering child是什么意思？我确实使用了一个 Promise，但我也解决了它并返回了 JSX 组件。我是一个反应的新手，如果这个问题这么愚蠢，对不起：P
我也用下面的解释更新了答案，它只是 .then 和 .catch 是在 promise 之后调用的回调，并且 react 想要渲染一些东西，而你不能渲染一个 promise
哇，我明白了，哈哈！非常感谢您的额外解释！
很高兴能正确解释

【解决方案2】：

它有效，但为什么要导入 json 数据使用 axios insted of import。 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 或数据文件保存在公用文件夹中

我希望这对你有用

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

然后将您的渲染列表更改为：

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

【讨论】：