Question

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

2020-09-26

141

reactjs react-hooks use-effect

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

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

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;

Answer 1

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

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;

Answer 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);
      });
    });
  }, []);