时间戳

首页 > 解决方案 > 使用地图反应动态附加

reactjs - 使用地图反应动态附加

问题描述

我是新来的反应，

我正在学习反应，在这个过程中，我尝试使用反应创建一个 for 循环渲染。我是否被困在以下代码中

下面是我的代码

  <Container>
            <Row xs={3} md={4} lg={6}>
            {[...Array(numberOfCards)].map((e, i) => {
                return (
                  <Col className='mt-5' key={i+1}> 
                      <Card >
                          {/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
                          <Card.Body>
                              <Card.Title tag="h5">Card title</Card.Title>
                              <Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
                              <Card.Text>Some quick example text to build on the card title and make up the bulk of the
                                  card's
                                  content.</Card.Text>
                              <Button onClick={() =>addquantity({i+1},{email})}>Button</Button>
                          </Card.Body>
                      </Card>
                  </Col>
                )
            })}
            </Row>
        </Container>

在这里，在按钮 Onclick 事件中，我传递了“{i+1}”

在此处输入图像描述

你能帮我理解我在这里做错了什么吗？

提前致谢

标签： reactjsreact-native

解决方案

在 中定义函数时onClick，变量在范围内，不应使用{...}格式插入。

这应该有效（注意email应该在某处定义）：

         <Container>
            <Row xs={3} md={4} lg={6}>
            {[...Array(numberOfCards)].map((e, i) => {
                return (
                  <Col className='mt-5' key={i+1}> 
                      <Card >
                          {/* <Card.Img top width="100%" src="/images/companylogo.png" alt="Card image cap"/> */}
                          <Card.Body>
                              <Card.Title tag="h5">Card title</Card.Title>
                              <Card.Subtitle tag="h6" className="mb-2 text-muted">Card subtitle</Card.Subtitle>
                              <Card.Text>Some quick example text to build on the card title and make up the bulk of the
                                  card's
                                  content.</Card.Text>
                              <Button onClick={() =>addquantity(i+1,email)}>Button</Button>
                          </Card.Body>
                      </Card>
                  </Col>
                )
            })}
            </Row>
        </Container>

推荐阅读