API 数据未使用 useEffect() 在 img 标签中呈现答案

【问题标题】：API data are not rendering in img tag using useEffect()API 数据未使用 useEffect() 在 img 标签中呈现
【发布时间】：2021-01-12 21:20:58
【问题描述】：

我正在尝试从 API 获取数据并将响应传递给 img src，它显示状态值为“未定义”。在下面的代码中，我尝试在 useEffect 中设置“bannerImage”状态并抛出“未定义”。我也尝试使用普通函数，将“bannerImage”作为空值。

注意：then 语句中“res”的值是显示 url，但设置为 state 时它不起作用。

    function Carousel(props) {
      let CarouselSettings = CarouselSetting.homePageBannerCarousel;
      const [bannerImage, setBannerImage] = useState();
    
      const serviceEndpoint = config.serviceHost + "/mycompany";
    
      useEffect(() => {
        props.carouselData.map((data) => {
          //setBannerDetail(data);
          return axios
            .get(
              serviceEndpoint +
                config.apiUrl.getAllAppImage +
                "/?id=" +
                data.pbDtlId +
                "&&vendorId=1" +
                "&&filecatcode=" +
                getFilecatcode.banner
            )
            .then(res => setBannerImage(res );
        });
      });

      console.log(bannerImage, "===banner");
      return (
        // <div className="pt-40">
        <div className="slider-wrapper relative top-130 py-8 px-10 bg-gray-100">
          <Slider {...CarouselSettings}>
            {props.carouselData.map((data) => {
              return (
                <div>
                  <div>
                    <h1 className="text-3xl font-semibold">{data.bannerTitle}</h1>
                    <h4 className="text-xl py-5">
                      {data.bannerDesc1} {data.bannerDesc2}
                    </h4>
                    <h4 className="text-xl pb-5">{data.bannerDesc3}</h4>
                   <img src={bannerImage}/>
                  </div>
                </div>
              );
            })}
          </Slider>
        </div>
      );
    }
    
    export default Carousel;

【问题讨论】：

错误信息到底是什么？
console.log的值(bannerImage, "===banner");是“未定义 ===横幅”
你说它抛出了一个错误，但是 - 错误信息是什么？（简单地访问或使用 undefined 不是错误）
如果图像从不渲染，添加catch 以检查请求中的错误
我在 "then" 控制台语句中验证了 "res" 值，它显示了图像 url。但是当我分配给 state 并检查它没有显示为未定义时。

标签： reactjs react-hooks use-effect

【解决方案1】：

为每个项目设置图像，而不是为轮播数据中的所有项目使用相同的变量。在您的 useEffect 循环中，轮播数据并为 src 添加另一个道具。

function Carousel({ carouselData }) {
  let CarouselSettings = CarouselSetting.homePageBannerCarousel;
  const [carousel, setCarousel] = useState([]);

  const serviceEndpoint = config.serviceHost + "/mycompany";

  useEffect(() => {

    const getBannerImages = async () => {

      const data = await Promise.all(carouselData.map(async (item) => {
      // get the image url and set it to the item and access it in your render with data.src
        const src = await axios.get(
          serviceEndpoint +
            config.apiUrl.getAllAppImage +
            "/?id=" +
            item.pbDtlId +
            "&&vendorId=1" +
            "&&filecatcode=" +
            getFilecatcode.banner)

        return {
          ...item,
          src
        }

      }));

      setCarousel(data);

    }

    getBannerImages()
    .catch(e => console.log(e));

  }, [carouselData]);

  return (
    // <div className="pt-40">
    <div className="slider-wrapper relative top-130 py-8 px-10 bg-gray-100">
      <Slider {...CarouselSettings}>
        {carousel.map((data) => {
          return (
            <div>
              <div>
                <h1 className="text-3xl font-semibold">{data.bannerTitle}</h1>
                <h4 className="text-xl py-5">
                  {data.bannerDesc1} {data.bannerDesc2}
                </h4>
                <h4 className="text-xl pb-5">{data.bannerDesc3}</h4>
              <img src={data.src}/>
              </div>
            </div>
          );
        })}
      </Slider>
    </div>
  );
}

export default Carousel;

【讨论】：

我收到错误，例如 await 不能在函数外使用，删除后 src 数组显示为 promis 函数仍未解决。你能帮忙吗？
我也试过了，但是 promise 没有得到解决。所以数据没有来
现在我在“carouselData”中有两个数组有没有办法获取数据。我正在努力获取价值。

【解决方案2】：

试试下面的方法，

useEffect(() => {
    props.carouselData.map((data) => {
      //setBannerDetail(data);
      return axios
        .get(
          serviceEndpoint +
            config.apiUrl.getAllAppImage +
            "/?id=" +
            data.pbDtlId +
            "&&vendorId=1" +
            "&&filecatcode=" +
            getFilecatcode.banner
        )
        .then(res => {
            setBannerImage(res);
      });
    });
  }, []);

【讨论】：