Javascript api中的React图像标题错误可能与正确的索引有关

下稿自：

我的应用程序正在为lightbox使用react图像，并为旋转木马使用react旋转木马图像。我的api有一个标题和图像。我的问题是页脚标题中的标题总是随着选定的图像出现，而在lightbox旋转木马中不会更改。我认为这与所选图像的索引有关？到目前为止，我的代码是：

问题示例：

slider.js

import React, { Component } from "react";
// import "../slider/slider.css";
import "./slider.css";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
import LightBox, { Modal, ModalGateway } from "react-images";

const responsive = {
  superLargeDesktop: {
    breakpoint: { max: 4000, min: 3000 },
    items: 1
  },
  desktop: {
    breakpoint: { max: 3000, min: 1024 },
    items: 1
  },
  tablet: {
    breakpoint: { max: 1024, min: 464 },
    items: 1
  },
  mobile: {
    breakpoint: { max: 464, min: 0 },
    items: 1
  }
};

class Slider extends Component {
  _isMounted = false;

  state = {
    awsApiData: [],
    loading: false,
    //selectedIndex: 0,
    selectedImage: {},
    lightboxIsOpen: false
  };

  componentDidMount() {
    this._isMounted = true;
    console.log("app mounted");
    this.setState({ loading: true });
    /*global fetch */
    fetch("https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/imgApi")
      .then(data => data.json())
      .then(data =>
        // this.setState({ awsApiData: data[0], loading: false }, () =>
        this.setState(
          {
            // awsApiData: data.map(item => ({source: item.download_url })),
            awsApiData: data.map(item => ({
              ...item,
              source: item.image
            })),
            loading: false
          },
          () => console.log(data)
        )
      );
  }
  componentWillUnmount() {
    this._isMounted = false;
  }

  toggleLightbox = (post, selectedIndex) => {
    // this.setState(state => ({
    //   lightboxIsOpen: !state.lightboxIsOpen,
    //   selectedIndex
    // }));
    this.setState(state => ({
      lightboxIsOpen: !state.lightboxIsOpen,
      selectedImage: { title: post.title, index: selectedIndex }
    }));
  };

  render() {
    return (
      <div>
        {this.state.loading ? (
          <div className="text-center">Loading...</div>
        ) : (
          <div>
            <Carousel
              additionalTransfrom={0}
              showDots={false}
              arrows={true}
              autoPlaySpeed={3000}
              autoPlay={true}
              centerMode={false}
              className="slider"
              containerClass="container-with-dots"
              dotListClass="dots"
              draggable
              focusOnSelect={false}
              infinite
              itemClass="carousel-top"
              keyBoardControl
              minimumTouchDrag={80}
              renderButtonGroupOutside={false}
              renderDotsOutside
              responsive={responsive}
            >
              {Object.values(this.state.awsApiData).map((post, indx) => {
                return (
                  <div
                    className="mt-5"
                    key={indx}
                    //onClick={() => this.toggleLightbox(indx)}
                    onClick={() => this.toggleLightbox(post, indx)}

                  >
                    <img
                      className="media-img card-img-top card-img-hero"
                      src={post.source}
                      alt="Alt text"
                      style={{ cursor: "pointer" }}
                    />
                  </div>
                );
              })}
            </Carousel>
            <ModalGateway>
              {this.state.lightboxIsOpen ? (
                <Modal onClose={this.toggleLightbox}>
                  <LightBox
                    components={{
                      FooterCaption: () => <div>{this.state.selectedImage.title}</div>
                    }}
                    //currentIndex={this.state.selectedIndex}
                   currentIndex={this.state.selectedImage.index}
                    // formatters={{ getAltText }}
                    frameProps={{ autoSize: "height" }}
                    views={this.state.awsApiData}
                  />
                </Modal>
              ) : null}
            </ModalGateway>
          </div>
        )}
      </div>
    );
  }
}

export default Slider;

import React，{Component}来自“React”；
//导入“./slider/slider.css”；
导入“/slider.css”；
从“react multi Carousel”导入转盘；
导入“react multi carousel/lib/styles.css”；
从“react images”导入LightBox，{Modal，ModalGateway}；
常数响应={
超大桌面：{
断点：{max:4000，min:3000}，
项目：1
},
桌面：{
断点：{max:3000，min:1024}，
项目：1
},
平板电脑：{
断点：{max:1024，min:464}，
项目：1
},
流动电话：{
断点：{max:464，min:0}，
项目：1
}
};
类滑块扩展组件{
_isMounted=错误；
状态={
awsApiData:[]，
加载：false，
//已选择索引：0，
选择图像：{}，
lightboxIsOpen:错误
};
componentDidMount（）{
这个。_isMounted=true；
控制台日志（“安装的应用程序”）；
this.setState（{loading:true}）；
/*全局提取*/
取回（“https://onelbip0e6.execute-api.eu-west-2.amazonaws.com/livestage/imgApi")
.then（data=>data.json（））
。然后（数据=>
//this.setState（{awsApiData:data[0]，loading:false}，（）=>
这是我的国家(
{
//awsApiData:data.map（item=>（{source:item.download_url}）），
awsApiData:data.map（项=>({
…项目，
来源：item.image
})),
加载：错误
},
（）=>console.log（数据）
)
);
}
组件将卸载（）{
这个。_isMounted=false；
}
toggleLightbox=（post，selectedIndex）=>{
//this.setState（state=>({
//lightboxIsOpen:！state.lightboxIsOpen，
//选定索引
// }));
this.setState（state=>({
lightboxIsOpen:！state.lightboxIsOpen，
selectedImage:{title:post.title，索引：selectedIndex}
}));
};
render（）{
返回(
{this.state.loading(
加载。。。
) : (
{Object.values（this.state.awsApiData）.map（（post，indx）=>{
返回(
this.toggleLightbox（indx）}
onClick={（）=>this.toggleLightbox（post，indx）}
>
);
})}
{this.state.lightboxIsOpen(
{this.state.selectedImage.title}
}}
//currentIndex={this.state.selectedIndex}
currentIndex={this.state.selectedImage.index}
//格式化程序={{getAltText}}
frameProps={{autoSize:“height”}
视图={this.state.awsApiData}
/>
)：null}
)}
);
}
}
导出默认滑块；

您的标题设置为

此.state。选择了图像.title

，但当您的灯箱视图更改时，您从不更新状态（即调用

setState（）

）

您需要将

onViewChange

处理程序添加到

LightBox

组件：

<LightBox onViewChange={handleLightBoxViewChange} .../>

如果不希望更新状态，则页脚组件将接收当前视图，以便您可以按如下方式进行更新：

<LightBox
  components={{
    FooterCaption: ({currentView}) => <div>{currentView.title}</div>
  }}
  //...
/>

{currentView.title}
}}
//...
/>

谢谢这两个选项中的任何一个。有没有更好的方法可以做到这一点，即更新状态还是通过视图来完成？@Sole我不认为有更好的方法，你只需要决定哪一种最适合你的需要。更新

页脚字幕

是最简单的方法，通常是一个好方法。

<LightBox
  components={{
    FooterCaption: ({currentView}) => <div>{currentView.title}</div>
  }}
  //...
/>