admin-on-rest "Translate is not a function" 在遵循文档中的示例之后

Question

在遵循文档中的 i18n 示例之后，我尝试在我的代码中插入该示例，如下所示：

import React, { Component } from 'react';
import {
    List,
    Datagrid,
    TextField,
    NumberField,
    DateField,
    Create,
    Edit,
    SimpleForm,
    TextInput,
    SelectInput,
    SelectArrayInput,
    NumberInput,
    DateInput,
    EditButton,
    DisabledInput,
    TabbedForm,
    FormTab,
    ReferenceManyField,
    BooleanInput,
    ViewTitle,
    translate
} from 'admin-on-rest';
import { Card, CardHeader, DropDownMenu, MenuItem } from 'material-ui';

class MyComponent extends Component {

   constructor(props) {
       super(props);

       //State for each DropDownMenu
       this.state = {
           tableValue: null,
           operationTypeValue: null
       }
   }

   handleValues = (label, event, index, value) => {
       switch(label) {
           case 'operation.table':
               this.setState({tableValue: value});
               break;
           case 'operation.type':
               this.setState({operationTypeValue: value});
               break;
           default:
               break;
       }
   }

   render() {
       const { translate } = this.props;

       return (
           <Card>
               <ViewTitle title={translate('resources.datasources.operation.title')}/>
               <CardHeader subtitle={translate('resources.datasources.operation.info')} />
               <DropDownMenu name="operation.table" value={this.state.tableValue} onChange={this.handleValues.bind(this, "operation.table")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.table')} label={translate('resources.datasources.operation.table')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
                   <MenuItem value={2} primaryText="table2" label="table2" />
                   <MenuItem value={3} primaryText="table3" label="table3" />
               </DropDownMenu>
               <br/>
               <DropDownMenu name="operation.type" value={this.state.operationTypeValue} onChange={this.handleValues.bind(this, "operation.type")} >
                   <MenuItem value={0} primaryText={translate('resources.datasources.operation.type')} label={translate('resources.datasources.operation.type')} />
                   <MenuItem value={1} primaryText="table1" label="table1" />
               </DropDownMenu>
           </Card>
       );
   }
}

export default translate(MyComponent);

如您所见，这与文档中的示例相同，适用于有状态组件。

但是，当我启动我的应用程序时，出现了这个错误：

TypeError: translate is not a function

更奇怪的是版本之间的不一致。在 1.3.3 版本中，我可以毫无问题地看到这个渲染的组件；而在 1.4 版中会发生这种情况。

知道这个问题可能是什么吗？

最佳，

Answer 1

在我的项目中它不是const { translate } = this.context; 相反，它是 const { translate } = this.context;

我认为这应该有用，如果不行，你能post你的 this 里有什么吗？

Answer 2

我解决了这个问题。

毕竟，问题不在于组件本身，而是 translate 函数未在 props 中定义，而是在名为 translate 的属性中定义。

我修复了调用 MyComponent 的文件，现在问题已解决。

感谢大家的帮助。

admin-on-rest "Translate is not a function" 在遵循文档中的示例之后

admin-on-rest "Translate is not a function" after following example in documentation

admin-on-rest