Как создать строку запроса в React

avatar
Lucky
9 августа 2021 в 00:57
94
1
0

В настоящее время я делаю приложение для реагирования, мне нужно отображать изображение продукта для каждого продукта, изображение продукта установлено как ProductImagesID. Чтобы получить идентификатор изображения продукта, ему нужно вызвать API. Поэтому я пытаюсь позвонить напрямую в «src», но я не знаю, как заменить продукт. id и imageID с данными из запроса, чтобы динамически показывать фотографии для конкретного продукта. Пожалуйста, помогите мне, как сделать API в src динамическим. С этим я могу узнать что-то новое, чтобы улучшить свои знания. Заранее спасибо.

Вот как я пытаюсь вызвать API непосредственно в src

This how I try to call the API directly in the src

Это как API Productimage с productID и ImageID.

ProductImage API path

Это изображения продукта, установленные в массиве ID

enter image description here

<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>
Источник
mr rogers
9 августа 2021 в 01:06
2

Возможно, вы можете добавить фрагменты кода (не скриншоты), чтобы было легче составить ответ. Моя интуиция подсказывает, что вам нужно выполнить интерполяцию строк с помощью обратных галочек (`) - developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Ответы (1)

avatar
Phil
9 августа 2021 в 01:22
2

На снимке экрана Swagger указано, что вам нужны параметры пути, а не параметры запроса.

Попробуйте что-нибудь подобное

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

Обратите внимание, что я запустил параметры через encodeURIComponent(), чтобы убедиться, что они не нарушат ваши URL-адреса.


Если вы хотите показать все свои изображения, вы можете использовать метод map

{product.ProductImages.map(image => (
  <img src={`/api/v1/ProductFile/${encodeURIComponent(product.ID)}/Product/${encodeURIComponent(image)}`} />
))}
Lucky
9 августа 2021 в 01:42
0

извините, если я задаю много вопросов, так как в swagger вы можете видеть, что изображения продуктов находятся в массиве, установленном в идентификаторе, как мне сделать, чтобы отображалось только 1-е изображение массива. Можете ли вы научить меня?

Phil
9 августа 2021 в 01:44
0

@Lucky что-то вроде product.ProductImages[0], возможно? я обновил свой ответ

Lucky
9 августа 2021 в 01:47
0

большое спасибо, это работа. Спасибо большое, сегодня узнал много нового.

Lucky
12 августа 2021 в 04:00
0

@Phill хотел спросить, хотите ли вы отображать все изображения в массиве. должен ли мне понравиться этот продукт.ProductImages[], помогите, пожалуйста.

Phil
12 августа 2021 в 08:01
0

@Lucky, я добавил пример в свой ответ