如何在 React 中创建查询字符串

Question

我目前正在做一个反应应用程序，我必须显示每个产品的产品图像，产品图像设置为 ProductImagesID。要获取产品图像ID，它需要调用API。所以我尝试直接在“src”中调用，但我不知道更换产品。 id 和 imageID 与来自查询的数据一起使其动态显示特定产品的照片。请帮助我了解如何使 src 中的 api 动态化。有了这个，我可以学习一些新的东西来提高我的知识。提前致谢。

这就是我尝试直接在 src 中调用 API 的方式

这是 Productimage API 如何使用 productID 和 ImageID。

这是设置在 ID 数组中的 ProductImages

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.0.1/react-dom.min.js"></script>
<div>
      <div className="wrapper">
        <div className="section latest-offers">
          <Container>
            <Row xs="1" sm="2" md="3">
              {res.data.Result.slice(0, 3).map((product) => {
                return (
                  <Col key={product.ID} xm="12" md={{ size: "3", offset: 1 }}>
                    <Card className="card-product card-plain d-flex flex-column p-3 flex-md-row  flex-sm-column">
                      <div className="card-image p-2 ">
                        <img
                          className=""
                          alt={product.Name}
                          src="/api/v1/ProductFile/?productID={610a454ad51ba524b7f949f9}/?get=Product/?imageID={610a4582d51ba524b7f949fa}"
                        />

                        <CardBody>
                          <div className="card-description font-weight-normal">
                            <CardTitle tag="h5">{product.Name}</CardTitle>
                          </div>
                          <div className="price">
                            <span className="mr-1">
                              <strong>
                                RM
                                {product.Price}
                              </strong>
                            </span>
                          </div>
                        </CardBody>
                      </div>
                    </Card>
                  </Col>
                );
              })}
            </Row>
          </Container>
        </div>
      </div>
    </div>

Answer 1

您的 Swagger 屏幕截图表明您需要 path parameters，而不是 query parameters。

试试这样的

<img src={`/api/v1/ProductFile/${encodeURIComponent(product.ID)}/Product/${encodeURIComponent(product.ProductImages[0])}`}>

请注意，我已通过 encodeURIComponent() 运行参数以确保它们不会破坏您的网址。

---

如果你想显示所有的图片，你可以使用 map 方法

{product.ProductImages.map(image => (
  <img src={`/api/v1/ProductFile/${encodeURIComponent(product.ID)}/Product/${encodeURIComponent(image)}`} />
))}