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"
     }
  ]
}

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

并且正如其他人所说的那样.state必须是小写的

Answer 2

将地图功能更改为data.topbarLinks.map以访问json数据。

let topbarLinks = data.topbarLinks.map((topbarLinks, key) => {
      return (
        <Link
          key={topbarLinks.id}
          text={topbarLinks.text}
          icon={topbarLinks.icon}
          link={topbarLinks.link}
        />
      )
    })

然后设置状态

this.setState({topbarLinks: topbarLinks});

在构造函数中将此初始状态更改为this.State到this.state。

Answer 3

我不认为State应该在你的构造函数中的this.State中大写。

Answer 4

topbar.json：

export default {
  "topbarLinks": []
}

然后您可以直接导入它而无需提取

import data from '../../data/topbar.json'
let topbarLinks = data.results.map((topbarLinks, key) => {
  return (
;

将JSON数据导入REACTJS中的数组

4 个答案: