小编典典

ReactJS:最大更新深度超出错误

javascript

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

阅读 698

收藏
2020-05-01

共1个答案

小编典典

那是因为您在render方法中调用了toggle,这将导致重新渲染,toggle将再次调用并再次重新渲染,依此类推

这行代码

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

您需要onClick参考this.toggle不调用它

解决 此问题,请执行此操作

{<td><span onClick={this.toggle}>Details</span></td>}
2020-05-01