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

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

当前回答

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触发，因为那是你的值。等等

2019-06-14 05:07:00

其他回答

1.如果我们想在调用中传递参数，那么我们需要像下面这样调用方法因为我们使用的是箭头函数，所以不需要在构造函数中绑定方法。

onClick={() => this.save(id)}

当我们像这样在构造函数中绑定方法时

this.save= this.save.bind(this);

然后，我们需要调用该方法而不传递任何参数，如下所示

onClick={this.save}

我们尝试在调用函数时传递参数如下所示，然后误差就像最大深度超出。

 onClick={this.save(id)}

2019-12-12 05:44:13

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

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

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

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

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

2018-05-06 15:19:03

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

2022-08-10 03:07:45

只需删除()，但如果是useEffect的情况，则

const [isInitialRender, setIsInitialRender] = useState(true); useEffect(() => { const data = localStorage.getItem("auth"); 如果(isInitialRender) { setIsInitialRender(假); If(数据){ const parsed = JSON.parse(data); setAuth({…认证，用户:已解析。用户，令牌:已解析。令牌}); ｝｝ }， [auth, isInitialRender]);

isInitialRender true和false将避免你陷入循环

2022-11-24 01:08:39

如果你不需要向函数传递参数，只需从函数中删除()，如下所示:

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

但是如果你想传递参数，你应该像下面这样做:

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

2019-04-24 11:34:15

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

推荐文章

最新文章

标签