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




react菜鸟教程 (4)

因为你在render方法中调用toggle会导致重新渲染和切换,会再次调用并重新渲染,等等

你的代码中的这一行

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

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

解决 这个问题

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

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

如果你不需要将参数传递给function,只需从函数中删除(),如下所示:

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

但如果你想传递参数,你应该这样做:

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

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

inputDigit(digit){
  this.setState({
    displayValue: String(digit)
  })

<button type="button"onClick={this.inputDigit(0)}>

为什么?

<button type="button"onClick={() => this.inputDigit(1)}>1</button>

函数onDigit设置状态,导致重新渲染,导致onDigit触发,因为这是你设置为onClick的值,导致设置状态导致重新渲染,导致onDigit触发,因为这是你的值'重新......等等


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

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