Javascript 在react js中访问json文件

这是我的代码：

class App extends Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: 'Jal Irani',
          imgURL: './man.jpg',
          hobbyList: ['Front-end Web Development', 'Back-end Web Development', 'Eating Free Food'],
        },
      ],
    };
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Profiler</h1>
        </header>
        <p className="App-intro">//access the json data here</p>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
数据：[
{
名称：“日本航空公司”，
imgURL:“./man.jpg”，
爱好列表：[“前端Web开发”、“后端Web开发”、“吃免费食物”]，
},
],
};
}
render（）{
返回(
欢迎来到Profiler
//在此处访问json数据
);
}
}

我想访问中的json元素

<p className="App-intro">//access the json data here. 

//在此处访问json数据。

我曾尝试使用react map函数，但没有成功

---

有什么帮助吗。我是react js的新手。

您可以如下方式呈现数据：

<p className="App-intro">
  <span>{this.state.data[0].name}</span>
  {this.state.data[0].hobbyList.map(e => <span key={e}>{e}</span>)}
</p>

{this.state.data[0].name}
{this.state.data[0].hobbyList.map（e=>{e}}

您是否尝试映射您的

状态

数据

对象

render() {
 return (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <h1 className="App-title">Welcome to Profiler</h1>
    </header>

 {this.state.data.map((dataItem, i) => 
    <div key={i}>
      <span>{dataItem.name}</span>
      <img src={dataItem.imgURL}/>
      <ul>
        {dataItem.hobbyList.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </div>
  )}
  </div>
);
}

render（）{
返回(
欢迎来到Profiler
{this.state.data.map（（dataItem，i）=>
{dataItem.name}

{dataItem.hobbyList.map（（item，i）=>
{item}
）}

)}
);
}

从“React”导入React；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[
{
名称：“日本航空公司”，
imgURL:“./man.jpg”，
业余爱好者：[
“前端Web开发”，
“后端Web开发”，
“吃免费食物”
]
}
]
};
}
render（）{
const{name，imgURL，hobbyList}=this.state.data[0]；
console.log（名称）；
console.log（imgURL）；
console.log（hobbyList）；
返回(
欢迎来到Profiler

);
}
}

别忘了给

添加一个键span

我收到一个错误，没有定义“e”，在

后面有一个结束括号。请重试更新的代码。不要将整个对象用作键，请使用索引：.map（（e，i）=>{e}）@IgorAlemasow

e

是字符串，而不是对象。也不鼓励使用索引作为键：很高兴我能帮上忙。

import React from "react";
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [
        {
          name: "Jal Irani",
          imgURL: "./man.jpg",
          hobbyList: [
            "Front-end Web Development",
            "Back-end Web Development",
            "Eating Free Food"
          ]
        }
      ]
    };
  }

  render() {
    const { name, imgURL, hobbyList } = this.state.data[0];
    console.log(name);
    console.log(imgURL);
    console.log(hobbyList);
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to Profiler</h1>
        </header>
        <p className="App-intro" />
      </div>
    );
  }
}