如何将数组传递给material-ui dataSource props

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} />
    }
});