如何在反应中使用onload？

Question

要在 onload 上运行 imagesrore 函数，我必须调用<img src="image_7.jpg" className="hide" alt="image_7.jpg"/>image 但实际上没有使用此行，如果我删除此 onload 则不起作用，并且不会调用该函数。那么如何在反应中调用 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，只需this.imageStore()在 componentDidMount 中触发

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 **

}, [])

请记住导入 useEffect 以及 import React, { useEffect } from 'react'