Question

我无法获得材料ui下拉以填充JSON数据。有人能看出我做错了吗？这是包含JSON和代码本身的代码。

`
const json = {   ResponseMetadata: {
RequestId: "1B29B45E145594A7",
HostId:
  "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=",
HTTPStatusCode: 200,
HTTPHeaders: {
  "x-amz-id-2":
    "fNB6fQZ8LQrK53j9lIOMSKy49mA8xrAMiwVh05/fKcBB5/gjYF6qUdxLFw4/zR5mRNHg2ge6t3w=",
  "x-amz-request-id": "1B29B45E145594A7",
  date: "Sun, 13 May 2018 20:36:02 GMT",
  "content-type": "application/xml",
  "transfer-encoding": "chunked",
  server: "AmazonS3"
},
RetryAttempts: 0   },   Buckets: [
{
  Name: "eladft-1-653237860766",
  CreationDate: "2014-09-01T16:58:41Z"
},
{
  Name: "elasticdf37860766",
  CreationDate: "2015-10-06T00:24:57Z"
},
{
  Name: "elasticdf0766",
  CreationDate: "2015-10-02T17:37:19Z"
}   ],   Owner: {
DisplayName: "dfdf",
ID: "b4bf8bde7571756284e067071dfe442c7b014a09f012a1179"   }   };
`

 <form className={classes.root} autoComplete="off">
    <FormControl className={classes.formControl}>
      <InputLabel htmlFor="bucketName-simple">Buckets</InputLabel>
      <Select
        native="true"
        value={this.state.json.Buckets.Name}
        onChange={this.handleChange}
        inputProps={{
          name: "v_bucketName",
          id: "age-simple"
        }}
      >
        {this.state.json.Buckets.map((Buckets, i) => (
          <MenuItem native="true" key={i} value={Buckets.Name}>
            {Buckets.Name}
          </MenuItem>
        ))}
        )} 
      </Select>
    </FormControl>
  </form>
);
 }
}

来自AWS S3的数据。但这是使用Material-UI和React JS

Code Sanbox

Answer 1

您正在使用native=true。这意味着您无法使用MenuItem组件。请改用<option>。

请参阅https://material-ui-next.com/demos/selects/#native-select。

JSON Material UI选择DropDown

1 个答案: