Question

我只想渲染一次，但是渲染无限循环。我在这个项目中使用了React Dnd方法

此警告显示：超出最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。 React限制了嵌套更新的数量，以防止无限循环。

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>
    )
}

storeData代码：

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)

Answer 1

循环发生在Store组件的render方法中

呼叫this.props.chici(itemS.name)，
调用您的chichiHandler()函数
在父组件上调用this.setState()
触发重新渲染，即
导致Store重新渲染，这...

当用户将鼠标悬停在某个内容上时，似乎希望调用chichi函数，在这种情况下，最好在相关元素上使用onMouseOver道具，而不是尝试用道具来做（有关更多信息，请参见https://reactjs.org/docs/events.html#mouse-events）。

通常，您应该从不在setState()中用render()来调用<key>com.apple.security.app-sandbox</key> <true/> <key>com.apple.security.files.bookmarks.app-scope</key> <true/> <key>com.apple.security.files.user-selected.read-write</key> <true/>，因为它容易引起这类循环。

如何在反应中超过最大更新深度

1 个答案: