json - 将 JSON 数据导入到 REACTJS 中的数组中

Question

所以我已经看了几个小时了，现在试图弄清楚它，但我就是无法弄清楚。

我有一个位于“/src/data/topbar.json”的 json 文件，我想将其包含在我的 topbar-container 组件中，该组件将用于生成顶部菜单。

我在这里做错了什么？

topbar.json:

{
  "topbarLinks": [
    {
      "id": 1,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-home",
      "text": "home",
      "link": "/"
     },
     {
      "id": 2,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-euro",
      "text": "Pricing",
      "link": "/pricing"
     },
     {
      "id": 3,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-exclamation-sign",
      "text": "Help",
      "link": "/help"
     },
     {
      "id": 4,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-question-sign",
      "text": "FAQ",
      "link": "/faq"
     },
     {
      "id": 5,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-edit",
      "text": "Register",
      "link": "/register"
     },
     {
      "id": 6,
      "icon": "header__topbar__list__link__icon glyphicon glyphicon-share",
      "text": "Login",
      "link": "/login"
     }
  ]
}

topbar-container.js

import React, { Component } from 'react';

import './topbar-container.scss';
import Link from '../topbar-link/topbar-link';
require ('../../data/topbar.json');

class TopbarContainer extends Component {
  constructor() {
    super();
    this.State = {
      topbarLinks: []
    }
  }

  componentDidMount() {
    fetch('../../data/topbar.json')
      .then(results => {
        return results.json();
      }).then(data => {
        let topbarLinks = data.results.map((topbarLinks, key) => {
          return (
            <Link
              key={topbarLinks.id}
              text={topbarLinks.text}
              icon={topbarLinks.icon}
              link={topbarLinks.link}
            />
          )
        })
      })
  }

  render() {
    return (
      <div className="container-fluid header__topbar">
        <div className="row">
          <div className="container">
            <ul className="header__topbar__list">
              {this.state.topbarLinks}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default TopbarContainer;

Answer 1

您无法获取本地 JSON 文件，您必须导入它，或者设置一个将为该 JSON 文件提供服务的网络服务器

import myJson from '../../data/topbar.json';

然后只需映射它并且不要忘记 setState

componentDidMount() {
    let topbarLinks = myJson.topbarLinks.map((topbarLinks, key) => {
      return (
        <Link
          key={topbarLinks.id}
          text={topbarLinks.text}
          icon={topbarLinks.icon}
          link={topbarLinks.link}
        />
      )
    })
    this.setState({topbarLinks: topbarLinks});  // <--
    //or just this.setState({ topbarLinks });
  }

正如其他人指出的， this.state 必须小写