箭头函数中的组件重新渲染答案

【问题标题】：Component re-rendering in arrow functions箭头函数中的组件重新渲染
【发布时间】：2021-07-25 18:13:47
【问题描述】：

我有一个箭头功能来切换 div 并根据 div 设置一个按钮来显示或隐藏。


    toggleDeliveryDiv = () => {
        document.getElementById('btn_collapse_delivery').click(); 
        this.setState({deliveryShow: !this.state.deliveryShow})
        
        var styl = document.getElementById("plusDiv")
     
            if(this.state.deliveryShow){
                styl.style.display = 'block'
            }else{
                styl.style.display = 'none'
            }
    }

我在 onClick 事件中调用箭头函数，如下所示：

onClick={this.toggleDeliveryDiv}

但是我猜该方法要么被调用两次，要么组件由于 setState 调用而被重新渲染。请问我怎样才能防止箭头函数中的重新渲染，或者我怎样才能更好地实现这一点？？？

【问题讨论】：

你不应该在 react 中主动操作 DOM（除非在非常特殊的极端情况下），你应该依靠 this.state 来改变可见性。
我的用例剥夺了我依赖状态来改变可见性的能力，因为它总是创建一个新实例并导致多个元素具有相同的 id 错误

标签： javascript reactjs setstate

【解决方案1】：

您可以使用“this.state.deliveryShow”来更改 div 元素的样式，而不是操作 DOM。这样您就不必手动处理它了。

<div id="plusDiv" style={{display:this.state.deliveryShow?'block':'none'}}></div>

【讨论】：

这两种方法仍然会导致重新渲染或多个函数调用
我已经相应地编辑了答案。让我知道它现在是否有效。
谢谢。虽然我在使用状态来控制样式时仍然遇到同样的问题。所以我试图隐藏或显示的按钮是动态添加额外表单组件的添加按钮。当前，当单击按钮时，会添加额外的组件，但也会切换整个 div。添加方法：``` addChild = (e) => { let objId = e.target.id;让 objName = "文本"+objId; e.target.id = Number(objId) + 1 var objCom = this.state.componentList.concat({id:objId,name:objName,booleane:true}) this.setState({ componentList: objCom }) }跨度>

【解决方案2】：

应该是这样的： onClick={this.toggleDeliveryDiv} 要么 onClick={()=>this.toggleDeliveryDiv()}

【讨论】：