ReactJS：最大更新深度超出错误 [英] ReactJS: Maximum update depth exceeded error

问题描述

我正在尝试在ReactJS中切换组件的状态但是我收到一条错误说明：

I am trying to toggle the state of a component in ReactJS but I get an error stating:

超出最大更新深度。当组件在componentWillUpdate或componentDidUpdate中重复调用setState时，可能会发生这种情况。 React限制嵌套更新的数量以防止无限循环。

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.

我没有在代码中看到无限循环，任何人都可以帮助？

I don't see the infinite loop in my code, can anyone help?

ReactJS组件代码：

ReactJS component code:

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;

推荐答案

因为你在render方法中调用toggle导致重新渲染和切换将再次调用并重新渲染，依此类推

that because you calling toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on

此行代码

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

你需要点击 onClick 参考 this.toggle 没有打电话

you need to make onClick refer to this.toggle not calling it

到修复问题这样做

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

这篇关于ReactJS：最大更新深度超出错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！