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;
ベストアンサー1
これは、レンダリング メソッド内でトグルを呼び出しているため、再レンダリングが行われ、トグルが再度呼び出されて再度レンダリングが行われる、という動作が繰り返されるためです。
コード内のこの行:
{<td><span onClick={this.toggle()}>Details</span></td>}
呼び出すのではなく、onClick
参照する必要があります。this.toggle
この問題を解決するには、次の操作を実行してください。
{<td><span onClick={this.toggle}>Details</span></td>}