如何将数组传递给Material-UI DataSource道具

Question

我正在使用material-ui作为组件。 material-ui中有一个自动完成组件，我想使用它来显示带有图标的图标名称列表。 如果我仅将MenuItem传递给dataSource，则会得到一个没有列表的空输入框。 如果我尝试像在代码中那样传递键和值，则会收到意外的令牌错误。

这是我的代码

console.log('this.props.fetchIcon', this.props.fetchIcon.icons);
const listOfIcon = _.map(this.props.fetchIcon.icons, (icon) => {
                      return (text: {icon.name}, value: (<MenuItem primaryText={icon.name} secondaryText={icon.name} />));
                    });
return (
  <div className="device-action">
    <Dialog
        title="Add a Tab"
        actions={actions}
        modal={false}
        open={this.props.createTab.open}
        onRequestClose={this.props.CancelDeviceEvent}
    >
    <div className="icon">
      <AutoComplete
        floatingLabelText="select any icon"
        filter={AutoComplete.noFilter}
        openOnFocus
        dataSource={listOfIcon}
      />
    </div>
    </Dialog>
  </div>
);

减速器

const initialState = {
  fetching: false,
  fetched: true,
  icons: [],
  error: null,
};

export const fetchIconReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_ICONS_START':
      return { ...state, fetching: true };
    case 'FETCH_ICONS_ERROR':
      return { ...state, fetching: false, error: action.payload };
    case 'RECIEVE_ICONS':
      return { ...state, fetching: false, fetched: true, icons: action.payload };
    default:
      return state;
  }
};

this.props.fetchIcon.icons控制台如下

Answer 1

您应该为dataSource返回一个对象数组。 请尝试以下方法。

_.map(this.props.fetchIcon.icons, (icon) => {
    return {
      text: icon.name,
      value: <MenuItem primaryText={icon.name} secondaryText={icon.name} />
    }
});