我试图在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;

当前回答

你应该在调用函数时传递事件对象:

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

如果你不需要处理onClick事件,你也可以输入:

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

现在还可以在函数中添加参数。

其他回答

当我使用useEffect像这个useEffect(() =>{}),添加[]到它,像这个useEffect(() =>{},[])。

先忘掉react: 这与react无关,让我们了解Java Script的基本概念。例如,您已经在java脚本中编写了以下函数(名称为A)。

function a() {

};

问题1)如何调用我们已经定义的函数? 答:一个();

问题2)如何传递函数的引用,以便稍后调用它? 答:让乐趣= a;

现在回到你的问题,你已经使用了函数名的paranthesis,这意味着当下面的语句将被渲染时,函数将被调用。

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

那么如何改正呢? 简单! !只要去掉括号。通过这种方式,您已经将该函数的引用提供给onClick事件。它只在单击组件时才会回调函数。

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

一个与反应相关的建议: 避免使用有人在回答中建议的内联函数,这可能会导致性能问题。 避免下面的代码,它将在函数被调用时一次又一次地创建同一个函数的实例(lamda语句每次都会创建新实例)。 注意:并且不需要显式地将事件(e)传递给函数。你可以在函数中访问它而不传递它。

{< td > < span onClick = {(e) = > this.toggle (e)} >细节< / span > < / td >}

https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

onClick你应该调用函数,这叫做你的函数切换。

onClick={() => this.toggle()}

在本例中,就是这段代码

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

导致切换函数立即调用,并重新呈现它一次又一次,从而进行无限的调用。

因此,只传递对toggle方法的引用就可以解决问题。

所以,

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

将是解决方案代码。

如果你想使用(),你应该使用一个像这样的箭头函数

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

如果你想传递参数,你应该选择最后一个选项,你可以这样传递参数

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

在最后一种情况下,它不会立即调用,也不会导致函数的重新呈现,因此避免了无限调用。

你应该在调用函数时传递事件对象:

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

如果你不需要处理onClick事件,你也可以输入:

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

现在还可以在函数中添加参数。