我试图在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;
那是因为您在render方法中调用了toggle,这将导致重新渲染,toggle将再次调用并再次重新渲染,依此类推
这行代码
{<td><span onClick={this.toggle()}>Details</span></td>}
您需要onClick参考this.toggle不调用它
onClick
this.toggle
要 解决 此问题,请执行此操作
{<td><span onClick={this.toggle}>Details</span></td>}