[解決済み] reactでonloadを使うには？

質問

imagesrore関数をonloadで実行するには、次のように呼び出す必要があります。 <img src="image_7.jpg" className="hide" alt="image_7.jpg"/> の画像がありますが、実際にはこの行の使用はなく、これを削除すると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
            });
            }

          }

解決方法は？

不要な画像をレンダリングする代わりに、次のように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() コンポーネントマウント

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
        });
    }

}