从json文件加载语言时出现翻译问题

时间:2019-04-11 20:58:29

标签: reactjs react-redux

我的应用程序中有简单的本地化版本。当我手动将语言设置为状态时可以使用,但是当我想从某个json文件加载翻译时,我遇到了第二种语言的问题,并收到标准错误“ Missing translationId:language的userId”,但是代码保持不变。 。 在构造函数中,当我使用translations1时,this.props.addTranslation(this.state.translations1); 它有效,但是当我使用this.props.addTranslation(this.state.translations); 我遇到错误

有人可以帮我吗?

        constructor(props){
    super(props);
    this.state = {
        translations1: {
            pocetna: ['Početna', 'Почетна'],
            listaKorisnika: ['Lista Korisnika', 'Листа Корисника'],
            dodajKorisnika: ['Dodaj Korisnika', 'Додај Корисника'],
            userId: ['User ID', 'Усер ИД']
        },
        translations: []
    }
     this.props.initialize({
        languages: [
            {name: "Latinica", code: "lt"},
            {name: "Cirilica", code: "cr"}
        ],
        options: {
            renderToStaticMarkup,
            defaultLanguage: 'lt'
        }
    })

    this.props.addTranslation(this.state.translations);
    this.onChangeLanguage = this.onChangeLanguage.bind(this);
}
onChangeLanguage(_slag) {
    console.log('onChangeLanguage: ', _slag.value)
    this.props.setActiveLanguage(_slag.value);
}

componentDidMount() {
    this.props.getTranslations();
}

componentWillReceiveProps(nextProps) {
    console.log('nextProps: ', nextProps.translations)
    this.setState({
        translations: nextProps.translations
    })
}

render() {

    const languageInSelect = [
        { label: 'Latinica', value: 'lt' },
        { label: 'Cirilica', value: 'cr' }
      ];

    return(
        <div className="sidebar"  style={{'backgroundImage': 'url(assets/img/sidebar-3.jpg)'}}
            data-color="purple" data-background-color="white" 
            data-image="../assets/img/sidebar-1.jpg">

        <div className="sidebar-wrapper">
            <ul className="nav" >
                <li className="nav-item ">
                    <NavLink to="/pocetna" exact={true} className="nav-link"  activeStyle={{ 'backgroundColor': '#9c27b0', 'color':'white', 'fontWeight':'bold'}}>
                        <MaterialIcon icon="dashboard" />
                        {/* <i className="material-icons">dashboard</i> */}
                        <Translate id="pocetna">Početna</Translate>
                        {/* <p>Početna</p> */}
                    </NavLink>
                </li>
                <li className="nav-item ">
                    <NavLink to="/listaKorisnika" exact={true} className="nav-link" activeStyle={{ 'backgroundColor': '#9c27b0', 'color':'white','fontWeight':'bold'}}>
                        <i className="material-icons">person</i>
                        <Translate id="listaKorisnika">Lista Korisnika</Translate>
                        {/* <p>Lista korisnika</p> */}
                    </NavLink>
                </li>

                <li className="nav-item ">
                    <NavLink to="/dodajKorisnika" className="nav-link" activeStyle={{ 'backgroundColor': '#9c27b0', 'color':'white','fontWeight':'bold' }}>
                        <i className="material-icons">person_add</i>
                        <Translate id="dodajKorisnika">Lista Korisnika</Translate>
                        {/* <p>Dodaj korisnika</p> */}
                    </NavLink>
                </li>

                <li className="nav-item ">
                    <Select 
                        onChange={this.onChangeLanguage}
                        options={languageInSelect}
                        defaultValue={{label: 'Latinica', value: 'lt'}}
                    />
                </li>
            </ul>
        </div>



    </div>
    )

}

1 个答案:

答案 0 :(得分:0)

这是因为translations变量是一个数组,如果要使用此数组中的值来调用某些函数,则应对其进行解构或映射以获取诸如this.state.translations[0]等的单个值。< / p>