javascript - 在react js中访问json文件

Question

这是我的代码:

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>
    );
  }
}

我想访问

中的 json 元素

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

我尝试使用 react map 功能但没有成功。

有什么帮助吗？是 React js 中的新内容。

Answer 1

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>
    );
  }
}