如何传递一个 URL 的 JSON 响应并将其传递到另一个 JSON URL 以获取结果？答案

【问题标题】：How pass the JSON response of one URL and pass it into another JSON URL to fetch the result?如何传递一个 URL 的 JSON 响应并将其传递到另一个 JSON URL 以获取结果？
【发布时间】：2020-05-08 08:09:35
【问题描述】：

我正在尝试从此 JSON URL API 访问所有“landscapePosterId”。在上述 URL 的 JSON 响应中： “landscapePosterId”是图像 ID。我想在最后的 URL 中传递它以获取 Image Like http://staging.connectingdotsinfotech.com:8080/firestixAPI_dev_2/api/v1/files/download/ 例子：- http://staging.connectingdotsinfotech.com:8080/firestixAPI_dev_2/api/v1/files/download/5de660b91b5f7b5d95559311，那么我如何合并这两个 API 并访问图像
这是我访问“landscapePosterId”的代码

import React from 'react';
import Axios from 'axios';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';


class Slider extends React.Component {

    constructor() {
        super();
        this.state = {
            data: []
        }
    }

    async componentDidMount() {
        const response = await Axios.get("http://staging.connectingdotsinfotech.com:8080/firestixAPI_dev_2/api/v2/media/fetchAllMediaSlider")
        .then((response) => {
            //console.log(response.data)
            this.setState({
                data: response.data
            })
        })
    }

    async componentDidMount() {
        const response = await Axios.post("")
    }


    render() {
        return ( 
            <>
            <Carousel>
                <div>
                    {
                        this.state.data.map((item,index) => {
                            return (
                                <div key={index}>
                                    {item.landscapePosterId}
                                </div>
                            )
                        })
                    }
                </div>
            </Carousel>
            </>
        )
    }
}

export default Slider;

【问题讨论】：

axios.all 可能会有所帮助。您现在需要获取这些图像，还是仅将图像 id 存储在状态中以供以后加载/显示它们？
你能告诉我们你到目前为止尝试了什么吗？因为使用此代码，您似乎不知道如何使用 html。但你可以证明我错了。没有 api 会为您创建图像标签。所以在 div 里面创建一个 staging.connectingdotsinfotech.com:8080/firestixAPI_dev_2/api/…{item.landscapePosterId}"> 就可以了
@DrewReese 我想访问图像并使用这两个 API 将其显示到轮播上。形成我要访问所有“landscapePosterId”的第一个 API 并添加到第二个 API 以获取结果，在获取结果后我想将该图像显示到 Carousel
@jPO 我已经在描述中解释了我想要访问所有“landscapePosterId”并添加到第二个 API 以获取结果的所有内容，在获取结果后我想将该图像显示到 Carouse

标签： javascript json reactjs api

【解决方案1】：

在第一次获取之后，您就拥有了构建图像的 src url 以提供给轮播的所有内容。映射您收到的数据并解构 landscapePosterId 以构造 src url。 在这里，我还解构了 id 和 description 的反应键和图像 alt 文本标签以实现可访问性

render() {
  const { data } = this.state;
  return (
    <div className="App">
      <Carousel>
        {data.map(({ description, id, landscapePosterId }) => (
          <img
            key={id}
            alt={description}
            src={`http://staging.connectingdotsinfotech.com:8080/firestixAPI_dev_2/api/v1/files/download/${landscapePosterId}`}
          />
        ))}
      </Carousel>
    </div>
  );
}

【讨论】：

谢谢，谢谢，非常感谢，现在运行正常
感谢您的描述帮助我提高知识