Javascript 如何在react中超过最大更新深度
我只想为拖动渲染一次,但渲染无限循环。 我正在为这个项目使用react Dnd方法 显示此警告:超出最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环Javascript 如何在react中超过最大更新深度,javascript,reactjs,Javascript,Reactjs,我只想为拖动渲染一次,但渲染无限循环。 我正在为这个项目使用react Dnd方法 显示此警告:超出最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时,可能会发生这种情况。React限制嵌套更新的数量以防止无限循环 chichihandler = (id) => { console.log('inApp', id); this.setState({ hoverdID: 123
chichihandler = (id) => {
console.log('inApp', id);
this.setState({
hoverdID: 123
})
console.log("hoverd", this.state.hoverdID)
}
render() {
return (
<div className="all">
<Header />
<div className='Products_list' >
{this.state.productData.map((item) => (
<Products key={item.id} item={item} handleDrop={(productId) => this.addItem(productId)} />
))}
</div>
<div className='Store_list' >
<div className="storeName" >Store Name</div>
{this.state.storeData.map((itemS) => (
<Store key={itemS.code} itemS={itemS} chichi={(id) => this.chichihandler(id)} />
))}
</div>
</div>
)
}
循环发生在
存储
组件的渲染方法中,在该方法中
- 调用
,其中this.props.chici(itemS.name)
- 调用
函数,该函数chichiHandler()
- 在父组件上调用this.setState(),该组件
- 触发重新渲染,其中
- 导致
重新渲染,从而存储
chichichi
函数,在这种情况下,您最好在相关元素上使用onMouseOver
道具,而不是尝试使用道具(有关更多信息,请参阅)
通常,您不应该在render()
中从with调用setState()
,因为这会导致此类循环
import React, { Component } from 'react'
import { DropTarget } from 'react-dnd'
function collect(connect, monitor) {
return {
connectDropTarget: connect.dropTarget(),
hovered: monitor.isOver(),
item: monitor.getItem()
}
}
class Store extends Component {
render() {
const { connectDropTarget, hovered, itemS } = this.props
const backcgroundColor = hovered ? 'lightgreen' : ''
if (hovered) {
this.props.chichi(itemS.name)
console.log(itemS.name)
}
return connectDropTarget(
<div>
<div id={itemS.code} className='Store' style={{ background: backcgroundColor }}>
{this.props.itemS.name}
</div>
</div>
)
}
}
export default DropTarget('item', {}, collect)(Store)