在您的 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;

不是问题，是的，您正确地解决了Promise，

但是，即使您在控制台中键入，您实际返回的也是一个Promise，而 .then 或 .catch 是在其解决或拒绝时调用的回调，因此您看到 react想要呈现的东西，而您无法呈现Promise

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

我希望这对你有用

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

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

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

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

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