Reactjs 未使用useffect（）在img标记中呈现API数据

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

注意：then语句中的“res”值显示url，但当设置为仅表示其不工作时

功能转盘（道具）{
让CarouselSettings=CarouselSetting.homePageBannerCarousel；
const[bannerImage，setBannerImage]=useState（）；
const serviceEndpoint=config.serviceHost+“/mycompany”；
useffect（（）=>{
props.carouselData.map（（数据）=>{
//setBannerDetail（数据）；
返回轴
.得到(
服务端点+
config.apirl.getAllAppImage+
“/？id=”+
data.pbDtlId+
“&&vendorId=1”+
“&&filecatcode=”+
getFilecatcode.banner
)
.然后（res=>setBannerImage（res）；
});
});
console.log（bannerImage，==banner”）；
返回(
// 
{props.carouselData.map（（数据）=>{
返回(
{data.bannerTitle}
{data.bannerDesc1}{data.bannerDesc2}
{data.bannerDesc3}
);
})}
);
}
导出默认旋转木马；

尝试以下方法

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

---

为每个项目设置图像，而不是为旋转木马数据中的所有项目使用相同的变量。在

useffect

中，循环旋转木马数据并为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;

函数旋转木马（{carouselData}）{
让CarouselSettings=CarouselSetting.homePageBannerCarousel；
const[carousel，setCarousel]=useState（[]）；
const serviceEndpoint=config.serviceHost+“/mycompany”；
useffect（（）=>{
const getBannerImages=async（）=>{
const data=wait Promise.all（carouselData.map）（异步（项）=>{
//获取图像url并将其设置为该项，然后使用data.src在渲染中访问它
const src=等待axios.get(
服务端点+
config.apirl.getAllAppImage+
“/？id=”+
item.pbDtlId+
“&&vendorId=1”+
“&&filecatcode=”+
getFilecatcode.banner）
返回{
…项目，
src
}
}));
固定传送带（数据）；
}
getBannerImages（）
.catch（e=>console.log（e））；
}，[carouselData]）；
返回(
// 
{carousel.map（（数据）=>{
返回(
{data.bannerTitle}
{data.bannerDesc1}{data.bannerDesc2}
{data.bannerDesc3}
);
})}
);
}
导出默认旋转木马；

错误消息到底是什么？console.log（bannerImage，===banner）的值是“undefined==banner”，但您说它抛出了一个错误-错误消息是什么？（简单地访问或使用

未定义的东西不是错误）如果图像从未呈现，请添加一个
catch
，以检查“res”的requestI verified in“then”控制台语句中的错误值，它显示图像url。但是当我分配给state并检查其未显示为未定义时。我遇到了错误，例如await不能在函数外部使用，当删除时，src arry显示为promis函数仍然未解析。你能帮我吗？我尝试了相同的方法，但promise没有解析。因此，数据现在不来了。我正在在“carouselData”中有两个数组可以获取数据。我正在努力获取值。