迭代数组并一次显示一个反应组件。

Question

我有以下一页：

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" />一次提交，第三次.

Answer 1

您可以创建一个名为galleryIndex的状态，从0开始，然后向图库传递一个名为onSumbit的函数支柱，然后在那里将状态galleryIndex增加1，然后在图库组件上的图库页面中将imageUrl设置为来自索引galleryIndex的数组imageUrls的元素。