【发布时间】：2019-08-28 08:53:34
【问题描述】：
我正在使用 React 开发一个可以以不同语言显示的大学管理网站。到目前为止，我已经开发了如下所示的登录页面：
此时，我正在尝试以所选语言（EU、ES、EN）显示网站，但我收到 Module build failed 错误：
我真的不明白为什么会出现这个错误，因为我认为 JSX/html 标签被正确包装（注意我使用的是 Babel），请查看代码：
Login.js
import React from 'react'
import PropTypes from 'prop-types'
import { fetchPopularRepos } from '../utils/api'
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
}
function LoginForm ({ repos, selectedLanguage }) {
return (
<form className='column player'>
{(repos, selectedLanguage) => {
var lang = { username, password, login }
switch (selectedLanguage) {
case 0:
selectedLanguage = "EU";
lang = repos[0]
break;
case 1:
selectedLanguage = "ES";
lang = repos[1]
break;
case 2:
selectedLanguage = "EN";
lang = repos[2]
break;
}
return (
<div className='row player-inputs'>
<input
type='text'
id='username'
className='input-light'
placeholder={lang.username}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<input
type='password'
id='password'
className='input-light'
placeholder={lang.password}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<button
className='btn dark-btn'
type='submit'
>
{lang.login}
</button>
</div>
)
}}
</form>
)
}
export default class Login extends React.Component {
constructor(props) {
super(props)
this.state = {
selectedLanguage: 'EU',
repos: null,
error: null
}
this.updateLanguage = this.updateLanguage.bind(this)
this.isLoading = this.isLoading.bind(this)
}
componentDidMount () {
this.updateLanguage(this.state.selectedLanguage)
}
updateLanguage (selectedLanguage) {
this.setState({
selectedLanguage,
error: null,
repos: null
})
fetchPopularRepos(selectedLanguage)
.then((repos) => this.setState({
repos,
error: null,
}))
.catch(() => {
console.warn('Error fetching repos: ', error)
this.setState({
error: 'There was an error fetching the repositories.'
})
})
}
isLoading() {
return this.state.repos === null && this.state.error === null
}
render() {
const { selectedLanguage, repos, error } = this.state
return (
<React.Fragment>
<LanguagesNav
selected={selectedLanguage}
onUpdateLanguage={this.updateLanguage}
/>
{this.isLoading() && <p>LOADING...</p>}
{error && <p>{error}</p>}
<LoginForm repos={repos, selectedLanguage} />
</React.Fragment>
)
}
}
我从中检索数据的 JSON 文件：
languagesdata.js
{
"languages": [
{
"language": "EU",
"terms": {
"username": "Erabiltzailea",
"password": "Pasahitza",
"welcome": "Sartu GAUR 2.0ra",
"login": "Sartu"
}
},
{
"language": "ES",
"terms": {
"username": "Usuario",
"password": "Contraseña",
"welcome": "Entra a GAUR 2.0",
"login": "Entrar"
}
},
{
"language": "EN",
"terms": {
"password": "Password",
"username": "Username",
"welcome": "Log into GAUR 2.0",
"login": "Log in"
}
}
]
}
使用 API：
api.js
export function fetchPopularRepos () {
const endpoint = 'app/languagesdata.json'
return fetch(endpoint)
.then((res) => res.json())
.then((data) => {
if (!data.languages) {
throw new Error(data.message)
}
return data.languages
})
}
错误的真正原因是什么？
根据 React 的选择显示 JSON 数据的正确方法是什么？
【问题讨论】：
-
感谢您的评论，但问题已经结束。
标签： javascript json reactjs jsx babeljs