将 JSON 数据导入 REACTJS 中的数组答案

【问题标题】：Import JSON data in to array in REACTJS将 JSON 数据导入 REACTJS 中的数组
【发布时间】：2018-03-14 21:17:48
【问题描述】：

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

我有一个位于 '/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;

【问题讨论】：

标签： json reactjs ecmascript-6 jsx

【解决方案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 必须是小写的

【讨论】：

这会返回以下错误：第 32 行：'topbarLinks' is not defined no-undef
console.log topbarLinks 在将其分配给状态之前查看它返回的内容
它发回一个未定义的错误：Uncaught TypeError: Cannot read property 'topbarLinks' of null
尝试使用 data.topbarLinks.map 而不是 data.results.map
还是不行。错误：'topbarLinks' 未定义 no-undef

【解决方案2】：

topbar.json：

export default {
  "topbarLinks": []
}

然后你可以简单地导入它而不用 fetch

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

将map函数改为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。

【讨论】：