使用 formaMessage 时出现 intl returns 错误

Question

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

我正在尝试在 select-Tag 中使用 react-intl，我知道我不能使用 <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);

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

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

每个解决方案都以相同的错误结束： TypeError: 无法读取未定义的属性 '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行

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

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

Answer 1

injectIntl 注入一个名为 intl 的道具。可通过

访问

this.props.intl

但是您从 this.context

得到 intl

const { intl } = this.context;

将此行更改为

const { intl } = this.props

它应该可以工作。

你还需要取消注释这一行

export default injectIntl(Component)

并从 class 声明中删除 export。

使用 formaMessage 时出现 intl returns 错误

react intl returns error while using formaMessage

reactjs

react-intl