javascript - 将 JSON 信息获取到 Material-UI 对话框

Question

我正在处理包含信息的 JSON 文件。我还使用 React 和 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(...)，或者如果您使用Set类型来指定尺寸，则可以执行Sizes.forEach(...)。