React 组件中 Set 的迭代不会在 JSX 中呈现

Question

我正在尝试迭代在 React 组件内的 props 中传递的 javascript Set() 。在迭代到位的情况下，我无法在屏幕上渲染任何内容：

 {selectedCity.forEach((key, value) => (
          return (
            <Row>
              <Col sm={12} md={6} mdOffset={4} lgOffset={4}>
                <Typography className="hide-mobile" h3>
                  TICKET PRICE FOR IN-STATE:
                </Typography>
                <Typography h3>{value.name}</Typography>
                <TicketPriceInput
                  onChange={e => {
                    setConcertDetails('price', e.target.value);
                    detectInputChange(e);
                  }}
                  value={price}
                  name="price"
                  isPriceChanged={isPriceChanged}
                />
                <OutPriceLabel className="hide-mobile">
                  <Typography h3>TICKET PRICE FOR OUT-OF-STATE:</Typography>
                  <Typography h3 bold className="hide-mobile">
                    {outLocationPrice()}
                  </Typography>
                </OutPriceLabel>

                <FootNote>
                  <Typography medium spaced className="hide-mobile">
                    *After the first 20 tickets anyone located in-state can
                    purchase tickets at the regular ticket price you set.
                  </Typography>
                </FootNote>
              </Col>
            </Row>
          );
        ))}

我已经用map()or 的数组或对象做过很多次了Object.keys()，而且很有效。

Answer 1

你必须使用map. 那是因为mapwill 返回组件，但forEach不会。 map是一个数组方法，在 Sets 中不可用。但您可以使用Array.from轻松映射该集合（这会将 转换Set为Array）

Array.from(selectedCity).map(...)