如何使用ES6中的.map（）和循环从React中的外部文件解析JSON对象？

我试图使用React导入外部文件中的JSON对象，并在包含HTML的循环中显示其内容。目标是将所有这些显示到JQuery滑块（Slick）中

我想我成功地导入了JSON，但我无法显示它。我在网上找到的大多数结果也在ES5中

这是我的slider.js文件：

import React from 'react';
import slidesData from './slides.json';

export class Slider extends React.Component {
    constructor(){
        super();
        this.state = {
            slides: slidesData,
        }
    }

    render() {
        const list = this.state.slides.map(d => <div className="classTest">ID HERE {slidesData.id} - DESCRIPTION HERE {slidesData.desc}</div>);
        return (
            <div className="carousel">
                <div className="data">
                    <div>list before {list} list after</div>
                </div>
            </div>
        );
    }
}

结果显示在浏览器中：

list before
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
ID HERE - DESCRIPTION HERE
list after

这些文件位于同一文件夹中。 因此，

{list}

显示了4次（与它包含的项目一样），但它不显示内容。我错过了什么

然后，我想重复每个

，每次JSON有内容时都会显示一个

循环，但在我找到JSON没有正确显示的原因之前，我不想尝试更复杂的代码

谢谢=）
您在
.map（）
中访问了错误的对象。您应该访问
d
，而不是
slidesData
：

 render() {
        const list = this.state.slides.map((d, index) => <div className="classTest" key={index}>ID HERE {d.id} - DESCRIPTION HERE {d.desc}</div>); //changed
        return (
            <div className="carousel">
                <div className="data">
                    <div>list before {list} list after</div>
                </div>
            </div>
        );
    }

render（）{
const list=this.state.slides.map（（d，index）=>ID HERE{d.ID}-DESCRIPTION HERE{d.desc}）；//已更改
返回(
前列{list}后列
);
}

编辑

您还应该为
.map（）
中的标记提供一个
键。我编辑了我的原始答案。
您在
.map（）
中访问了错误的对象。您应该访问
d
，而不是
slidesData
：

 render() {
        const list = this.state.slides.map((d, index) => <div className="classTest" key={index}>ID HERE {d.id} - DESCRIPTION HERE {d.desc}</div>); //changed
        return (
            <div className="carousel">
                <div className="data">
                    <div>list before {list} list after</div>
                </div>
            </div>
        );
    }

render（）{
const list=this.state.slides.map（（d，index）=>ID HERE{d.ID}-DESCRIPTION HERE{d.desc}）；//已更改
返回(
前列{list}后列
);
}

编辑

您还应该为
.map（）
中的标记提供一个
键。我编辑了我的原始答案。
从外观上看，您的地图引用了“d”，但您试图通过{slidesData.id}访问

尝试：

const list=this.state.slides.map（d=>return（ID在这里`${d.ID}`-DESCRIPTION在这里`${d.desc}`））；
从外观上看，您的地图引用了“d”，但您正试图通过{slidesData.id}进行访问

尝试：

const list=this.state.slides.map（d=>return（ID在这里`${d.ID}`-DESCRIPTION在这里`${d.desc}`））；
this.state.slides.map（d=>ID这里{d.ID}-描述这里{d.desc}）有光滑滑块的反应端口，您可以使用它。（最好不要在react应用程序中使用jQuery）。看看这个
this.state.slides.map（d=>ID-HERE{d.ID}-DESCRIPTION-HERE{d.desc}）有光滑滑块的反应端口，您可以使用它。（最好不要在react应用程序中使用jQuery）。看看这个，这个很管用！我以为我这么做了，但没用。。。嗯，习惯网页包服务器刷新。如果我想学习如何在
上迭代循环，我应该在这里问它还是在新主题中问它？谢谢是的，再问一个问题。这会很难的。我在这个问题上得了-1，现在我被禁止“你已经达到了你的问题极限”。我真的尽了最大的努力，但我仍然不知道stackoverflow是如何工作的。我试着引用，输入代码，使用恰当的词语，提出问题，在提问之前数周研究数百个主题。。。我现在很沮丧。15年来，我从未在整个互联网上遇到过这样的事情。我能看到你的沮丧。如果你真的需要帮助，请告诉我（discord，skype，…）是的，我想我需要帮助。我看不出有什么办法可以摆脱这种局面，通过编辑或其他方式。我真的不明白我的禁令。我可以私下和你联系吗？这很有效！我以为我这么做了，但没用。。。嗯，习惯网页包服务器刷新。如果我想学习如何在
上迭代循环，我应该在这里问它还是在新主题中问它？谢谢是的，再问一个问题。这会很难的。我在这个问题上得了-1，现在我被禁止“你已经达到了你的问题极限”。我真的尽了最大的努力，但我仍然不知道stackoverflow是如何工作的。我试着引用，输入代码，使用恰当的词语，提出问题，在提问之前数周研究数百个主题。。。我现在很沮丧。15年来，我从未在整个互联网上遇到过这样的事情。我能看到你的沮丧。如果你真的需要帮助，请告诉我（discord，skype，…）是的，我想我需要帮助。我看不出有什么办法可以摆脱这种局面，通过编辑或其他方式。我真的不明白我的禁令。我可以私下和你联系吗？
const list = this.state.slides.map(d => return (<div 
className="classTest">ID HERE `${d.id}` - DESCRIPTION HERE `${d.desc}`</div>));