反应：在 onClick 中调用 function 返回 undefined

Question

I'm trying to write a code that shows a list of images, etc. based on this answer: https://stackoverflow.com/a/57635373/9478434

My code is:

class ImageGallery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      photoIndex: 0,
      isOpen: false,
      imageList: [],
    };
  }

  getImages() {
    axios
      .get(IMAGE_LIST_URL, {})
      .then((response) => {
        const data = response.data;
        console.log(data);
        this.setState({ imageList: response.data });
      })

      .catch((error) => {
        setTimeout(() => {
          console.log(error.response.data.message);
        }, 200);
      });
  }

  componentDidMount() {
    this.getImages();
  }
  changePhotoIndex(imgIndex) {
    this.setState({ photoIndex: imgIndex, isOpen: true });
  }

  render() {
    const { photoIndex, isOpen, imageList } = this.state;
    const singleImage = imageList.map(function (img, imgIndex) {
      const imagePath = `http://localhost:8000/media/${img.filePath}`;

      console.log(imagePath);
      return (
        <figure className="col-xl-3 col-sm-6">
          <img
            src={imagePath}
            alt="Gallery"
            className="img-thumbnail"
            onClick={() => this.changePhotoIndex(imgIndex)}
          />
        </figure>
      );
    });
    return <div>{singleImage}</div>;
  }
}

However while clicking on the image, I get a type error (t is undefined) in the console regarding to the line onClick={() => this.changePhotoIndex(imgIndex) and the state of app does not change.

Answer 1

The changePhoneIndex function considers itself and not the component as this .

You can bind it to the component itself and be able to access setState by adding this to the constructor:

constructor(props) {
    super(props);
    this.state = {
      photoIndex: 0,
      isOpen: false,
      imageList: [],
    };

    this.changePhotoIndex.bind(this);
  }

Or you can call set state directly:

onClick={() => this.setState({ photoIndex: imgIndex, isOpen: true })}

Answer 2

You forgot to bind your function. Add the following to your code:

constructor(props) {
    super(props);
    this.state = {
      photoIndex: 0,
      isOpen: false,
      imageList: [],
    };
    this.changePhotoIndex = this.changePhotoIndex.bind(this); // missing
  }