遍历数组并一次显示一个 React 组件答案

【问题标题】：Iterate through array and display React component one at a time遍历数组并一次显示一个 React 组件
【发布时间】：2020-10-08 16:47:44
【问题描述】：

我有以下页面：

const GalleryPage: NextPage = () => {
  const router = useRouter();
  const id = router.query.id as string;

  return (
    <Gallery id={id} imageUrl="someRandomImageUrl.png" />
  );
};

在图库组件中，我有

...
return (
    <div>
      <Form
        onSubmit={handleSubmit}
        name="judging"
      >
        <input type="hidden" name="form-name" value="judging" />

        <Container text style={{ marginTop: '2em' }} textAlign="center">
          <Image src={galleryProps?.imageUrl} size="medium" verticalAlign="middle" />
          <Table singleLine>
            <Table.Header>
              <TableHeader />
            </Table.Header>

            <Table.Body>
              <TableRow
                title="Composition"
                name="composition"
                item={composition}
                setItem={setComposition}
              />
              <TableRow
                title="Creativity - Originality"
                name="creativity"
                item={creativity}
                setItem={setCreativity}
              />
              <TableRow
                title="Neatness - Finishing details"
                name="neatness"
                item={neatness}
                setItem={setNeatness}
              />
            </Table.Body>
          </Table>
        </Container>
        <Container text style={{ marginTop: '1em' }} textAlign="center">
          <p>
            <Button type="submit">Submit</Button>
          </p>
        </Container>
      </Form>
    </div>
  );

其中TableRow 和TableHeader 是自定义组件。

我似乎无法实现的事情

我有一组图片 URL：

const imageUrls = ['firstImageUrl.png', 'secondImageUrl.jpeg', 'thirdImageUrl.png']

对于imageUrls 中的每个项目，我想显示Gallery 组件。并且只有在Gallery 中的表单提交后，我是否希望下一个实例显示以下图像。

即： firstcase: <Gallery id={id} imageUrl="firstImageUrl.png" /> 一旦提交表单，第二个案例 secondcase:<Gallery id={id} imageUrl="secondImageUrl.jpeg" />一旦提交表单，第三种情况 ...

【问题讨论】：

抱歉，您尝试了什么？请复制你的 2 个组件的更多代码（至少是你的道具，如果你使用它，你的状态）并解释你得到什么和你期望什么。

标签： node.js reactjs next.js

【解决方案1】：

您可以创建一个名为 galleryIndex 的状态，该状态从 0 开始，然后向图库传递一个名为 onSumbit 的函数属性，在其中将状态 galleryIndex 增加 1，然后在图库页面中在图库组件上设置 imageUrl成为索引 galleryIndex 处的数组 imageUrls 中的元素

【讨论】：