Bonjour, j'utilise 'react-intl' pour la traduction de mes messages sur mon site internet en react. J'ai certains texte qui nécessite un paramètre. 

Tout fonctionne bien cependant j'ai une erreurs dans la console disant : 

index.js:2177 [React Intl] Error formatting message: "cario.errors.minLength" for locale: "fr"
Error: The intl string context variable 'values' was not provided to the string '{values} characters minimum'

Voici comment je l'utilise : 

messages.js

import { defineMessages } from 'react-intl';

export default defineMessages({

minLength001: {
    id: 'cario.errors.minLength',
  },

});

fr.js

{
    "cario.errors.minLength": "{values} characters minimum",
}

Foo.js

import messages from './messages';

const foo = {
   bar1(intl,message, length) {
      return intl.formatMessage(messages[message], { values: length });
   }
}
foo.bar2 = (intl,event) => {
   return foo[bar1](intl,'minLength001', 2);
};

export default foo;

form.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { injectIntl, intlShape } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { makeSelectLocale } from './LanguageSelector';
import { makeSelectObj } from './Selectors';
import { compose } from 'redux';
import injectSaga from './injectSaga';
import injectReducer from './injectReducer';
import reducer from './Reducer';
import saga from './Saga';
import foo from './foo';
import messages from './messages';
import { setObjEvent } from './action';
import Form from '../../Components/Form';


export class form extends Component {
   constructor(props) {
      super(props);
      this.state = {
         obj: {}
      }
   
   onSubmit(event, locale) {
      event.preventDefault();
      const { obj } = this.state;

      obj.txt = foo.bar2(this.props.intl);
      this.setState({ obj });
   }
   render() {
      const { intl, locale } = this.props;
      return(
         <Form onSubmit={this.onSubmit.bind(this)}>
            <div>
               test: {this.state.obj.txt}
            </div>
         </Form>
      )
      
   }
};

const mapStateToProps = createStructuredSelector({
    obj: makeSelectObj(),
    locale: makeSelectLocale()
});

function mapDispatchToProps(dispatch) {
    return {
        setObjEvent: (event) => dispatch(setObjEvent(event))
        };
}


const withConnect = connect(mapStateToProps, mapDispatchToProps);
const withReducer = injectReducer({ key: 'obj', reducer });
const withSaga = injectSaga({ key: 'obj', saga });

export default compose(
    injectIntl,
    withReducer,
    withSaga,
    withConnect,
)(form);

-
Edité par little77 17 juin 2018 à 17:08:33