简体   繁体   English

如何在React中将数组作为prop传递而不转换为字符串

[英]How to pass an array as props in React without being converted to string

I'm developing a university administration website with React that can be displayed in different languages. 我正在使用React开发一个大学管理网站,该网站可以用不同的语言显示。 So far, I have developed the Login page, please see the code (note that I'm using Babel ): 到目前为止,我已经开发了Login页面,请查看代码(请注意,我正在使用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>
    )
  }
}

The data is being retrieved from this JSON file: 正在从此JSON文件中检索数据:

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

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: 我正在传递2个值作为props,一个数组存储和一个selectedLanguage字符串,因为它已在控制台中通过console.logs出现在代码中:

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>
    )
  }

Console: 安慰:

Value of repos : An array of objects 回购值: 对象数组

道具前的回购控制台值

Value of selectedLanguage : EU 所选语言的价值: 欧盟

道具前的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函数中调用两个值时,我的问题来了, 回购的值变成了单个字符串,而selectedLanguage的值变成了未定义:

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>
  )
}

Console: 安慰:

Value of repos : EU 回购价值: 欧盟

道具后的回购控制台值

Value of selectedLanguage : undefined selectedLanguage的值: 未定义

道具后的selectedLanguage控制台值

  • Why are values being converted? 为什么要转换值?
  • How can I pass them without being converted? 如何通过它们而不进行转换?

As we can see LoginForm expects 2 props, repos and selectedLanguage 如我们所见, LoginForm期望有2个道具,存储reposselectedLanguage

function LoginForm ({ repos, selectedLanguage }) { ... }

But you are passing only repos , 但是你只通过了repos

<LoginForm repos={repos, selectedLanguage} />

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 . 在这里, selectedLanguage绑定到了repos道具,并且您在控制台中获得了EU ,而selectedLanguage道具未通过且您undefined

I am also surprised, why repos={repos, selectedLanguage} is not giving syntax error 我也很惊讶,为什么repos={repos, selectedLanguage}没有给出语法错误

You need to separately pass both the values, 您需要分别传递两个值,

<LoginForm repos={repos} selectedLanguage={selectedLanguage} />

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM