Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.

问题原因

当前函数或者组件不包含在IntlProvider的props传递树路径中

解决

1、定义一个IntlLocale.tsx文件暴露Intl方法

/*
 * @description: 将intl作为函数方法使用
 */
import { createIntl, createIntlCache } from 'react-intl';

import { getLocale } from 'umi';

import en from './en-US';
import zh from './zh-CN';

const langs = {
  'zh-CN': zh,
  'en-US': en,
};

const cache = createIntlCache();
const currentLang = getLocale();

export default createIntl(
  {
    locale: currentLang,
    messages: langs[currentLang],
  },
  cache,
);

2、使用

// 在待使用intl的组件中,引入
import intlLocale from '@/IntlLocale';
// 在函数中使用
const diyFunc = async (params) => {
    const intl = intlLocale;
    const res = await apiFunc(params);
    if (res.code !== 10000) {
      throw new Error(res.message);
    } else {
      message.success(intl.formatMessage({ id: 'xxx.xxx.addSuccess' }));
    }
}

你可能感兴趣的:(前端,javascript,开发语言)