[解決済み】ReactJS: 最大更新深度を超えたエラー

質問

ReactJSでコンポーネントの状態を切り替えようとしているのですが、以下のようなエラーが発生します。

最大更新深度を超えました。これは、コンポーネントが componentWillUpdate または componentDidUpdate 内で繰り返し setState を呼び出すと発生する可能性があります。React は、無限ループを防ぐために、ネストされた更新の数を制限しています。

私のコードには無限ループが見当たりませんが、どなたか助けていただけませんか？

ReactJSコンポーネントのコードです。

import React, { Component } from 'react';
import styled from 'styled-components';

class Item extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        const currentState = this.state.details;
        this.setState({ details: !currentState }); 
    }

    render() {
        return (
            <tr className="Item"> 
                <td>{this.props.config.server}</td>      
                <td>{this.props.config.verbose}</td> 
                <td>{this.props.config.type}</td>
                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>
                {<td><span onClick={this.toggle()}>Details</span></td>}
            </tr>
    )}
}

export default Item;

解決方法は？

レンダーメソッド内でtoggleを呼び出すと、再レンダリングが発生し、toggleが再度呼び出され、再レンダリングが繰り返されるからです。

あなたのコードにあるこの行

{<td><span onClick={this.toggle()}>Details</span></td>}

を作成する必要があります。 onClick を参照する。 this.toggle 呼び出さない

に 直す この問題を解決するには、次のようにします。

{<td><span onClick={this.toggle}>Details</span></td>}