57007


現在reactを使ってフロントエンドの開発をしているのですが、`Uncaught Invariant Violation: Maximum update
depth exceeded. This can happen when a component repeatedly calls setState
inside componentWillUpdate or componentDidUpdate. React limits the number of
nested updates to prevent infinite
loops.`というエラーが出るが、どう対処すれば良いか解らず困っており質問させていただきました。

今やろうとしている事を説明させていただきます。  
やろうとしていることは、ある複数のデータ(hogeとする)に基づいた画像をクリックしたらポップアップが表示されるという事をしようとしています。  
そしてこの画像とポップアップとこれらを表示する大元の画面で三つのコンポーネントを定義しました。

Hoges.js:

[code]

    import React from "react"
    import PropTypes from "prop-types"
    import HogeImage from "./HogeImage";
    import loadsh from 'lodash';
    import Popup from "./Popup";
    
    class Hoges extends React.Component {
      constructor(props) {
        super(props);
        this.show_popup = this.show_popup.bind(this);
        this.state = {
          is_show: false,
          hoge: null
        };
      }
    
      show_popup(hoge) {
        this.setState({
          is_show: true,
          hoge: hoge
        });
      }
    
      render () {
        return (
          <React.Fragment>
                {hoges.map((hoge) => (
                  <HogeImage hoge={hoge} key={hoge.id} click_function={this.show_popup(hoge)} />
                ))}
            ))}
            <Popup hoge={this.state.hoge} is_show={this.state.is_show} />
          </React.Fragment>
        );
      }
    }
    
    Hoges.propTypes = {
      hoges: PropTypes.array
    };
    export default Hoges
    
[/code]

HogeImage.js:

[code]

    import React from "react"
    import PropTypes from "prop-types"
    
    class HogeImage extends React.Component {
      render () {
        return (
          <React.Fragment>
              <div onClick={this.props.click_function}>
                <img src={this.props.hoge.url} />
              </div>
          </React.Fragment>
        );
      }
    }
    
    
    
    HogeImage.propTypes = {
      hoge: PropTypes.object,
      click_function: PropTypes.func,
    };
    
    export default HogeImage
    
[/code]

Popup.js

[code]

    import React from "react"
    import PropTypes from "prop-types"
    
    class Popup extends React.Component {
      render() {
        return (
          <div>
            { this.props.is_show ?
              <div className='popup'>
                <div className='popup_inner'>
                  <img src={this.props.hoge.url} />
                </div>
              </div>
              :null }
          </div>
        );
      }
    }
    
    Popup.propTypes = {
      hoge: PropTypes.object,
      is_show: PropTypes.bool
    };
    export default Popup
    
[/code]

この様に書いたのですが、Hogesの辺りでエラーが出ている様です。

ここで質問なのですが、どうすればこのエラーを解消できるでしょうか？  
またやや主旨から逸れますが、要件に基づいて上記のソースの様に設計したのですが、設計は問題ないでしょうか？

ご回答お待ちしております。


CC BY-SA 4.0
2019-07-29T03:44:47.590
57002
2019-07-29T08:48:34.263
2019-07-29T04:24:21.550
15186
15186
question
reactjs
何故「Uncaught Invariant Violation: Maximum update depth exceeded.」というエラーが出るのかわかりません。


`Hoges` の `render` 内で

[code]

    <HogeImage hoge={hoge} key={hoge.id} click_function={this.show_popup(hoge)} />
    
[/code]

となっていますが、ここで関数 `this.show_popup` を評価してしまっています。React v16.8.6 の段階では
`React.Component` は `setState`
が呼ばれたあとに再レンダリングする（`render`が実行される）サイクルがデフォルトになっています。よって「`render`
が実行される」→「`this.show_popup` が実行される」→「`setState` が実行される」→「再度 `render`
が実行される」→（繰り返し） という無限のループに入ってしまい、"Maximum update depth
exceeded"のエラーが発生すると考えられます。

[code]

    <HogeImage hoge={hoge} key={hoge.id} click_function={() => this.show_popup(hoge)} />
    
[/code]

のように、`click_function` に関数を渡すように変更することで問題が解消されないでしょうか?


CC BY-SA 4.0
2019-07-29T08:48:34.263
57007
2019-07-29T08:48:34.263
32959
57002
answer