React-渲染二维数组

Question

当我尝试选择从2d数组渲染的特定按钮时，最终选择所有渲染的按钮。有没有一种方法可以渲染一个特定按钮的下部细节。

<Grid container>
        {this.serviceByLangauge.map((cat, id) => (
          <Grid
            item
            xs={4}
            key={cat.id}
            className={this.props.classes.categoryGroup}
          >
            <Button
              variant="contained"
              size="medium"
              color="primary"
              className={this.props.classes.services}
              onClick={this.showServices.bind(this, cat.services)}
              key={cat.id}
            >
              {cat.name}
            </Button>
            <div className={this.props.classes.serviceGroup}>
              {servicesList.length > 0 ? (
                <List>
                  {servicesList.map((serv, id) => (
                    <ListItem key={id}>
                      <ListItemText primary={id + 1 + ") " + serv.name} />
                    </ListItem>
                  ))}
                </List>
              ) : (
                <div></div>
              )}
            </div>
          </Grid>
        ))}
      </Grid>

] 2

Answer 1

您能告诉我们二维数组的数据吗？

编辑：

我想您不是在迭代servicesList。

尝试以下方法：

<Grid container>
        {this.serviceByLangauge.map((cat, id) => (
          <Grid
            item
            xs={4}
            key={cat.id}
            className={this.props.classes.categoryGroup}
          >
            <Button
              variant="contained"
              size="medium"
              color="primary"
              className={this.props.classes.services}
              onClick={this.showServices.bind(this, cat.services)}
              key={cat.id}
            >
              {cat.name}
            </Button>
            <div className={this.props.classes.serviceGroup}>
              {cat.services.length > 0 ? (
                <List>
                  {cat.services.map((serv, id) => (
                    <ListItem key={id}>
                      <ListItemText primary={id + 1 + ") " + serv.name} />
                    </ListItem>
                  ))}
                </List>
              ) : (
                <div></div>
              )}
            </div>
          </Grid>
        ))}
      </Grid>

Answer 2

从您提供的图像和源代码来看，我认为以下是错误的：

您从州中获取要显示的服务。在您的状态下，您只有一个服务列表。单击按钮时，使用按钮的服务更新状态。

            <Button
              variant="contained"
              size="medium"
              color="primary"
              className={this.props.classes.services}
              onClick={this.showServices.bind(this, cat.services)}
              key={cat.id}
            >

然后为每个按钮迭代相同的状态：

            <div className={this.props.classes.serviceGroup}>
              {servicesList.length > 0 ? (
                <List>
                  {servicesList.map((serv, id) => (
                    <ListItem key={id}>
                      <ListItemText primary={id + 1 + ") " + serv.name} />
                    </ListItem>
                  ))}
                </List>
              ) : (
                <div></div>
              )}
            </div>

我认为您想遍历cat而不是serviceList：

            <div className={this.props.classes.serviceGroup}>
              {cat.length > 0 ? (
                <List>
                  {cat.map((serv, id) => (
                    <ListItem key={id}>
                      <ListItemText primary={id + 1 + ") " + serv.name} />
                    </ListItem>
                  ))}
                </List>
              ) : (
                <div></div>
              )}
            </div>

Answer 3

我必须添加一个条件以确保仅在类别ID匹配时才渲染div

 if (this.state.showThis) {
      servicesComponent = (
        <List className={this.props.classes.serviceGroup}>
          {this.state.services.map((serv, id) => (
            <ListItem key={id}>
              <ListItemText primary={id + 1 + ") " + serv[langCode]} />
            </ListItem>
          ))}
        </List>
      );
    } else {
      servicesComponent = <div></div>;
    }

    const categories = servicesAndCategories.map((category, index) => (
      <Grid
        item
        xs={4}
        className={this.props.classes.categoryGroup}
        key={index}
      >
        <Button
          variant="contained"
          size="medium"
          color="primary"
          className={this.props.classes.services}
          onClick={this.showServices.bind(this, category.services, category.id)}
        >
          {category[langCode]}
        </Button>
        {this.state.currentCategory === category.id && servicesComponent}
      </Grid>
    ));
``