Получение информации JSON в Material-UI dialoge

Question

Я работаю с файлом JSON с информацией. Я также говорю о том, как реагировать с Material-UI на стиль и визуализацию. У меня есть файл JSON, который выглядит примерно так:

[{"item":123456", 
    "description":"Jacket", 
    "colors":[{ 
    "code":"blue", 
    "sizes":[{ 
     "code":"L", 

И так далее. Один элемент может иметь более одного размера с разными кодами размера. Я использую диалог из Material-UI с React. Я хочу создать простой раскрывающийся список со всеми размерами кода в диалоговом окне для выбранного элемента. Здесь я покажу вам, как я могу получить информацию о пункте в диалог:

export default class SelectFieldExampleCustomLabel extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = {value: 1}; 
} 

handleChange(event, index, value) { 
    this.setState({value}); 
} 

render() { 
    return (
     <SelectField value={this.state.value} onChange={this.handleChange.bind(this)}> 
      {dataSet.map(tile => (
      <MenuItem value={tile.item} label={tile.item} primaryText={tile.item}></MenuItem> 
      ))} 
     </SelectField> 
    ); 
} 

Это работает, но получает мою всю деталь я получил в моем файле JSON. Это всего лишь тест, но я хочу, чтобы этот размер имел общий размер для выбранного элемента.

я получил также другой способ получить данные из JSON в диалоге:

handleOpen(tile){ 
    this.setState({ 
     open: true, 
     tileTitle: tile.description, 
     tileImg: "img/" + tile.item + ".png", 
     tileCategory: tile.category, 
     tileGender: tile.gender, 
     tileSizes: tile.item 
    }); 
}; 

<Dialog 
        title={this.state.tileTitle} 
        actions={actions} 
        modal={false} 
        open={this.state.open} 
        contentStyle={styles.dialog} 
        onRequestClose={this.handleClose.bind(this)} 
       > 

        <img src={this.state.tileImg} style={styles.dialogImg} /> 
        <div style={styles.textBox}> 
         <h4>{this.state.tileCategory}</h4> 
         <p><b>Gender:</b> {this.state.tileGender}</p> 
         <SelectFieldExampleCustomLabel></SelectFieldExampleCustomLabel> 
        </div> 

       </Dialog> 

Любые советы, как я могу исправить то, что я прошу?

Answer 1

Я думаю, что вы на правильном пути с использованием состояния. Вы написали: «Я хочу, чтобы этот файл имел общие размеры для щелкнутого элемента», но неясно, делает ли этот код начальный клик. Предполагая, что это правда, вы можете изменить ваш обработчик следующим образом:

handleChange(event, index, value) { 
    sizes = [] 
    for (colors of dataSet[<index of selected value>].colors { 
    for (size of colors.sizes) { 
     if (! sizes.includes(size) { 
     // Or you could use Set type for sizes and use sizes.add(size) w/o if 
     sizes.push(size) 
     } 
    } 
    } 
    this.setState({ 
    value: value, 
    sizes: sizes, 
    }) 
} 

Затем в методе визуализации для падения размера вниз, вы могли бы сделать sizes.map (...) или если вы используете Установить тип для размеров , Sizes.forEach (...).