如何在React中使用Onload

Question

要运行imagesRore函数onload，我必须调用 <img src="image_7.jpg" className="hide" alt="image_7.jpg"/> image，但实际上没有使用此行，如果我删除此ONLOAD，则无效，并且函数不调用。因此，我该如何调用React中的Imagestore（）onload。

class PicturesList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
          imagesarray: []
          };
          this.imagestore = this.imagestore.bind(this);
        }
        render() {
          return (
          <div>
            <div onLoad= {() => this.imagestore()}>
                <img src="image_7.jpg" className="hide" alt="image_7.jpg"/>
                // To run the imagesrore function onload I have to call this image but actually there is no use of this line and if I remove this onload doesn't work and function is not called
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
          );
        }
        imagestore()
        {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
        }
      }

我想要的

class PicturesList extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
              imagesarray: []
              };
              this.imagestore = this.imagestore.bind(this);
            }
            render() {
              return (
              <div>
                <div onLoad= {() => this.imagestore()}>
                    // but when I did this imagestore() function not called
                </div>
                <Gallery url={this.state.imagesarray}/>
              </div>
              );
            }
            imagestore()
            {
            const imgUrls=this.props.apikeys;
            const objarr = Object.values(imgUrls);
            this.setState({
                imagesarray: objarr
            });
            }
          }

Answer 1

，而不是呈现您不想要的图像，您可以简单地将其加载到componentdidmount中，例如

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }
    componentDidMount() {
       const img = new Image();
        img.onload =() => {
          // image  has been loaded
          this.imagestore()
        };
        img.src = 'image_7.jpg';
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }
}

加载图像后，上面的解决方案只是调用Imagestore。但是，如果您打算在组件满载时调用Imagestore，则只需在ComponentDidMount中触发this.imageStore()

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }
    componentDidMount() {
        this.imagestore()
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }
}

Answer 2

在react中使用useeffect（）。您会这样使用：

useEffect(()=>{
**INSERT CODE YOU WANT RUN ON LOAD HERE **
}, [])

记住也要与 import React, { useEffect } from 'react'

Answer 3

应在<img>标签上使用您的Onload功能，而不是<div/>。