Reactjs 对象作为React子对象无效（找到：[对象承诺]）。如果要呈现子对象集合，请改用数组

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

这是我的产品组件：

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;

---

有人能帮我弄清楚吗？非常感谢

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

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

然后将渲染列表更改为：

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

---

在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想要的是要呈现的内容，而您无法呈现承诺。它可以工作，但为什么要使用axios而不是import导入json数据。

您的组件将看起来像

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或数据文件保存在公用文件夹中

---

我希望这适用于您

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

您能向我们展示您的项目组件吗？您是指产品组件吗？当然，我加了。哦，是的！对不起，我的错。查看代码，呈现imo时不应该出现错误。感谢您的回答！但我还是有点困惑，你用承诺来代替孩子的意思是什么？我确实使用了承诺，但我也解决了它并返回了JSX组件。我是一个新手反应，抱歉这个问题，如果它是如此愚蠢：PI已经更新了下面的解释，以及答案，它只是。然后和。捕捉是回调后调用的承诺和反应想要的东西，你不能提供承诺哇，我得到了笑！非常感谢您的额外解释！很高兴你能解释清楚

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;