如何在React中将数组作为prop传递而不转换为字符串 [英] How to pass an array as props in React without being converted to string
问题描述
我正在使用React开发一个大学管理网站,该网站可以用不同的语言显示.到目前为止,我已经开发了登录"页面,请查看代码(请注意,我使用的是 Babel ):
I'm developing a university administration website with React that can be displayed in different languages. So far, I have developed the Login page, please see the code (note that I'm using Babel):
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'>
{console.log(repos)}
{console.log(selectedLanguage)}
{(repos, selectedLanguage) => {
var lang = { username, password, login }
switch (selectedLanguage) {
case "EU":
selectedLanguage = "EU";
lang = repos;
break;
case "ES":
selectedLanguage = "ES";
lang = repos;
break;
case "EN":
selectedLanguage = "EN";
lang = repos;
break;
}
return (
<React.Fragment>
<div className='row player-inputs'>
<input
type='text'
id='username'
className='input-light'
placeholder={lang.terms.username}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<input
type='password'
id='password'
className='input-light'
placeholder={lang.terms.password}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<button
className='btn dark-btn'
type='submit'
>
{lang.terms.login}
</button>
</div>
</React.Fragment>
)
}}
</form>
)
}
LoginForm.propTypes = {
repos: PropTypes.array.isRequired
}
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>}
{repos != null && <LoginForm repos={repos, selectedLanguage} />}
{this.state.repos != null && console.log(`${JSON.stringify(repos)}`)}
{this.state.repos != null && console.log(`${selectedLanguage}`)}
</React.Fragment>
)
}
}
正在从此JSON文件中检索数据:
The data is being retrieved from this JSON file:
{
"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"
}
}
]
}
我正在传递2个值作为道具,一个数组 repos 和一个字符串 selectedLanguage ,可以在控制台的console.com中看到.在代码中:
I'm passing 2 values as props, an array repos and a string selectedLanguage as it can be seen in the console with the console.logs I've included in the code:
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>}
{repos != null && <LoginForm repos={repos, selectedLanguage} />}
{this.state.repos != null && console.log(`${JSON.stringify(repos)}`)}
{this.state.repos != null && console.log(`${selectedLanguage}`)}
</React.Fragment>
)
}
控制台:
回购金额的值: 一组对象
Value of repos: An array of objects
selectedLanguage 的值: 欧盟
我的问题是在调用 LoginForm 函数中的两个值时出现的, repos 的值变成一个字符串,而 selectedLanguage 的值变得不确定:
My problem comes when calling both values in the LoginForm function, the value of repos becomes a single string, and the value of selectedLanguage becomes undefined:
LoginForm
function LoginForm ({ repos, selectedLanguage }) {
return (
<form className='column player'>
{console.log(repos)}
{console.log(selectedLanguage)}
{(repos, selectedLanguage) => {
var lang = { username, password, login }
switch (selectedLanguage) {
case "EU":
selectedLanguage = "EU";
lang = repos;
break;
case "ES":
selectedLanguage = "ES";
lang = repos;
break;
case "EN":
selectedLanguage = "EN";
lang = repos;
break;
}
return (
<React.Fragment>
<div className='row player-inputs'>
<input
type='text'
id='username'
className='input-light'
placeholder={lang.terms.username}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<input
type='password'
id='password'
className='input-light'
placeholder={lang.terms.password}
autoComplete='off'
/>
</div>
<div className='row player-inputs'>
<button
className='btn dark-btn'
type='submit'
>
{lang.terms.login}
</button>
</div>
</React.Fragment>
)
}}
</form>
)
}
控制台:
回购金额的值: 欧盟
Value of repos: EU
selectedLanguage 的值: 未定义
- 为什么要转换值?
- 如何通过它们而不进行转换?
推荐答案
我们可以看到LoginForm
需要2个道具,repos
和selectedLanguage
As we can see LoginForm
expects 2 props, repos
and selectedLanguage
function LoginForm ({ repos, selectedLanguage }) { ... }
但是您只通过了repos
<LoginForm repos={repos, selectedLanguage} />
selectedLanguage
绑定到repos
道具,您在控制台中获取EU
,而selectedLanguage
道具未通过且您得到undefined
.
Here selectedLanguage
is getting bind to repos
props and you are getting EU
in your console, whereas selectedLanguage
prop is not being passed and you got undefined
.
我也很惊讶,为什么repos={repos, selectedLanguage}
没有给出语法错误
I am also surprised, why repos={repos, selectedLanguage}
is not giving syntax error
您需要分别传递两个值,
You need to separately pass both the values,
<LoginForm repos={repos} selectedLanguage={selectedLanguage} />
这篇关于如何在React中将数组作为prop传递而不转换为字符串的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!