реагировать intl возвращает ошибку при использовании formaMessage - PullRequest
Новая
       8

реагировать intl возвращает ошибку при использовании formaMessage

0 голосов
/ 25 ноября 2018

Я искал решение более 2 дней, но не нашел.

Я пытаюсь использовать response-intl внутри тега select, и я знаю, что могуне использовать <FormattedMessage />.Я должен использовать formattedMessage.

Вот код:

contact.jsx 

import React, { Component } from 'react';
import { Button, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
import { Grid, Jumbotron } from 'react-bootstrap';
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
import { defineMessages, injectIntl, intlShape } from 'react-intl';

const messages = defineMessages({
    common: { id: "app.contact.subject.common"}
});

export default class Contact extends Component
{
    render() {
        const { intl } = this.context;

        return (
            <Grid>
                <Jumbotron>
                    <h1><FormattedMessage id='app.contact.title' /></h1>
                    <form>
                        <FormGroup controlId="formCpntrolsSelect" >
                            <ControlLabel><FormattedHTMLMessage id="app.contact.subject.title" /></ControlLabel>
                            <FormControl
                                componentClass="select"
                                required
                            >
                                <option value="common">{intl.formatMessage(messages.common)}</option>
                                <option value="privacyPolicy">Datenschutz</option>
                                <option value="user">Benutzer</option>
                                <option value="affiliate">Affiliate</option>
                                <option value="webapp">Website</option>
                                <option value="android">Android-App</option>
                                <option value="ios">iPhone-App</option>
                                <option value="misc">sonstiges</option>
                            </FormControl>
                        </FormGroup>
                       // more code
                    </form>
                </Jumbotron>
            </Grid>
        )
    }
}

// export default injectIntl(Contact);

Как видите, я импортировал требуемый int-Компоненты от Reaction-Intl.Это последнее решение, которое я пробовал, и все закончилось тем же результатом.

Я даже пытался импортировать компонент в App.jsx с помощью `import {Contact} из 'contact'.

Каждое решение заканчивалось одной и той же ошибкой: Ошибка типа: не удалось прочитать свойство 'formatMessage' из неопределенного подробно: 

contact.jsx:28 Uncaught TypeError: Cannot read property 'formatMessage' of undefined
    at Contact.render (contact.jsx:28)
    at finishClassComponent (react-dom.development.js:14105)
    at updateClassComponent (react-dom.development.js:14069)
    at beginWork (react-dom.development.js:14687)
    at performUnitOfWork (react-dom.development.js:17242)
    at workLoop (react-dom.development.js:17281)
    at HTMLUnknownElement.callCallback (react-dom.development.js:144)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:193)
    at invokeGuardedCallback (react-dom.development.js:243)
    at replayUnitOfWork (react-dom.development.js:16536)
    at renderRoot (react-dom.development.js:17374)
    at performWorkOnRoot (react-dom.development.js:18252)
    at performWork (react-dom.development.js:18159)
    at performSyncWork (react-dom.development.js:18132)
    at requestWork (react-dom.development.js:18009)
    at scheduleWork (react-dom.development.js:17802)
    at scheduleRootUpdate (react-dom.development.js:18523)
    at updateContainerAtExpirationTime (react-dom.development.js:18549)
    at updateContainer (react-dom.development.js:18580)
    at ReactRoot.push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:18862)
    at react-dom.development.js:19016
    at unbatchedUpdates (react-dom.development.js:18397)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:19012)
    at Object.render (react-dom.development.js:19076)
    at Module../src/index.js (index.js:25)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:127)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

Надеюсь, вы можете помочь мне решитьэта беда.Это строка option value=common

Заранее благодарим за каждое удачное решение.

Если потребуется дополнительная информация, я обновлю сообщение.

1 Ответ

0 голосов
/ 25 ноября 2018

injectIntl вводит реквизит, называемый intl.Он доступен через 

this.props.intl

, но вы получаете intl из this.context

const { intl } = this.context;

измените эту строку на 

const { intl } = this.props

, и она должна работать.

Вам также необходимо раскомментировать эту строку 

export default injectIntl(Component)

и удалить export из объявления класса.

...