显示来自本地 JSON 文件的数据

Question

我正在从Tyler Mcginnis' React course（我强烈推荐顺便说一句）学习 React 编码，我决定开发自己的项目，一个大学管理网站，可以用不同的语言显示。

到目前为止，我已经开发了登录页面，请注意我使用的是 Babel：

Login.js

import React from 'react'
import PropTypes from 'prop-types'
import { languagedata } from './Languages'
import languagesdata from '../languagesdata.json'

function LanguagesNav ({ selected, onUpdateLanguage}) {
  const languages = ['EU', 'ES', 'EN']

  return (
    <div >
      <h1 className='center-text header-lg'>
        GAUR 2.0
      </h1>
      <ul className='flex-center'>
        {languages.map((language) => (
          <li key={language}>
            <button
              className='btn-clear nav-link'
              style={language === selected ? { color: 'rgb(187, 46, 31)' } : null }
              onClick={() => onUpdateLanguage(language)}>
              {language}
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

LanguagesNav.propTypes = {
  selected: PropTypes.string.isRequired,
  onUpdateLanguage: PropTypes.func.isRequired
}

export default class Login extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      selectedLanguage: 'EU'
    }

    this.updateLanguage = this.updateLanguage.bind(this)
  }
  componentDidMount () {
    this.updateLanguage(this.state.selectedLanguage)
  }
  updateLanguage (selectedLanguage) {
    this.setState({
      selectedLanguage
    })
  }
  render() {
    const { selectedLanguage } = this.state
    return (
      <React.Fragment>
        <LanguagesNav
          selected={selectedLanguage}
          onUpdateLanguage={this.updateLanguage}
        />
        <form className='column player'>
          <label htmlFor='username' className='player-label'>
            //Just testing whether JSON can be displayed
            { languagesdata.data }
          </label>
          <div className='row player-inputs'>
            <input
              type='text'
              id='username'
              className='input-light'
              placeholder='Erabiltzailea'
              autoComplete='off'
            />
          </div>
          <div className='row player-inputs'>
            <input
              type='password'
              id='username'
              className='input-light'
              placeholder='Pasahitza'
              autoComplete='off'
            />
          </div>
          <div className='row player-inputs'>
            <button
              className='btn dark-btn'
              type='submit'
            >
              Sartu
            </button>
          </div>
        </form>
      </React.Fragment>
    )
  }

}

我想根据存储在本地 JSON 文件中的信息以所选语言显示网站：

 [
  {
    "EU": {
      "welcome": "Sartu GAUR 2.0ra",
      "login": "Sartu"
    },
    "ES": {
      "welcome": "Entra a GAUR 2.0",
      "login": "Entrar"
    },
    "EN":{
      "welcome": "Log into GAUR 2.0",
      "login": "Log in"
    }
  }
]

我尝试了几种在 Internet 上找到的解决方案，但没有一个对我有用。

我尝试导入包含 JSON 数据的 Javascript 文件（见下文）并导入 JSON 文件本身（见上文 JSON）。

const languagedata = {
  "data": {
    "languages": [
      {
        "euskara": {
          welcome: "Sartu GAUR 2.0ra",
          login: "Sartu"
        },
        "español": {
          welcome: "Entra a GAUR 2.0",
          login: "Entrar"
        },
        "english":{
          welcome: "Log into GAUR 2.0",
          login: "Log in"
        }
      }
    ]
  }
};

因此，我有两个问题：

• 做我想做的事情的最佳方法是什么？
• 如何在 Login.js 中显示 JSON 数据？

Answer 1

我认为您的 Languages.js 文件中只缺少 export 关键字：

export const languagedata = {
  "data": {
    "languages": [
      {
        "euskara": {
          welcome: "Sartu GAUR 2.0ra",
          login: "Sartu"
        },
        "español": {
          welcome: "Entra a GAUR 2.0",
          login: "Entrar"
        },
        "english":{
          welcome: "Log into GAUR 2.0",
          login: "Log in"
        }
      }
    ]
  }
};

现在你应该可以使用

在你的 React 组件中导入变量 languagedata

import { languagedata } from './Languages'

Answer 2

要从 json 文件中获取数据，您必须向该文件发出请求。

class App extends React.Component{

  render(){
    return(
      <div>geting json data</div>
    );
  }
  
  componentDidMount(){
    fetch('YOUR-JSON-FILE-PATH')
      .then(response => response.json())
      .then(json => console.log(json))
  }
}

ReactDOM.render(<App/>,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

或者你可以使用同步的方式，

const data = require("YOUR-JSON-FILE-PATH");

希望对你有帮助！

Answer 3

你需要有 json-loader 模块。如果你使用 create-react-app，它会默认出现。

请看here。