时间戳

首页 > 解决方案 > 使用formaMessage时反应国际返回错误

reactjs - 使用formaMessage时反应国际返回错误

问题描述

我已经搜索了超过 2 天的解决方案，但没有找到任何解决方案。

我正在尝试在 select-Tag 中使用 react-intl ，我知道，我不能使用<FormattedMessage />. 我必须使用formattedMessage.

这是代码：

联系方式.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);

如您所见，我已经从 react-intl 导入了所需的 intl-Components。这个解决方案是最后一个，我已经尝试过并且都以相同的结果结束。

我什至尝试在 App.jsx 中使用 'import { Contact } from 'contact' 导入组件。

每个解决方案都以相同的错误结束： TypeError: Cannot read property 'formatMessage' of undefined detail:

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线

提前感谢每一个好的解决方案。

如果需要更多信息，我会更新帖子。

标签： reactjsreact-intl

解决方案

injectIntl注入一个名为intl. 它可以通过

this.props.intl

但你intl从this.context

const { intl } = this.context;

将此行更改为

const { intl } = this.props

它应该可以工作。

您还需要取消注释此行

export default injectIntl(Component)

并export从类声明中删除。

推荐阅读