React中defaultProps调用translate函数返回对象异常问题

核心原因 #

你遇到的问题本质是defaultProps的执行时机问题：

• GreetingComponent.defaultProps是在组件定义时就立即执行的，这时候你的translate函数可能还没有正确初始化（比如i18n语言包未加载完成、上下文未绑定），导致返回了非预期的数组对象，而非目标字符串。
• 当你把defaultProps设为key、在组件内部调用translate(title)时，代码是在组件渲染阶段执行的，此时i18n环境已经就绪，translate能正常返回字符串。

代码对比与优化 #

问题代码（触发异常的写法） #

const GreetingComponent = ({ title, id, className }) => {
    console.log('id');
    return (
        <section id={id} className={className}>
            <p> {title} </p>
        </section>
    )
};

GreetingComponent.propTypes = {
  title: PropTypes.string,
};

// translate在组件定义时立即执行，此时i18n环境可能未就绪
GreetingComponent.defaultProps = {
  title: translate('greeting_component_title'),
};

export default GreetingComponent;

正常写法（推荐方案） #

const GreetingComponent = ({ title, id, className }) => {
    console.log('id');
    // 渲染阶段调用translate，确保环境就绪
    const displayTitle = translate(title);
    return (
        <section id={id} className={className}>
            <p> {displayTitle} </p>
        </section>
    )
};

GreetingComponent.propTypes = {
  title: PropTypes.string,
};

// 仅设置默认key，延迟translate执行时机
GreetingComponent.defaultProps = {
  title: 'greeting_component_title',
};

export default GreetingComponent;

也可以直接在组件参数里设置默认值，写法更简洁：

const GreetingComponent = ({ title = 'greeting_component_title', id, className }) => {
    const displayTitle = translate(title);
    return (
        <section id={id} className={className}>
            <p> {displayTitle} </p>
        </section>
    )
};

补充说明 #

React的defaultProps本身并没有禁止执行函数，但由于它的执行时机早于组件挂载/渲染，任何依赖组件上下文、全局状态初始化的函数（比如i18n的translate、Redux的selectors等）都不适合在这里调用。这类函数应该放在组件渲染流程内执行，确保所需环境已经准备完毕。

内容的提问来源于stack exchange，提问作者DragonInTraining