Javascript 映射函数循环并给出错误反应_Javascript_Reactjs

Javascript 映射函数循环并给出错误反应

javascript reactjs

Javascript 映射函数循环并给出错误反应,javascript,reactjs,Javascript,Reactjs,我已经创建了通过单击菜单项创建的选项卡。在此之后，我希望结束的“X”仅在将鼠标悬停在父对象上时出现我认为这是一个地图问题，当我试图画“X”悬停时还没有产生，但我不知道如何解决它。为什么会出现这个错误无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是道具和状态的纯函数。 class LiTabs extends Component{ constructor(props, context){ super(props, context); ["s

我已经创建了通过单击菜单项创建的选项卡。在此之后，我希望结束的“X”仅在将鼠标悬停在父对象上时出现

我认为这是一个地图问题，当我试图画“X”悬停时还没有产生，但我不知道如何解决它。为什么会出现这个错误<代码>无法在现有状态转换期间更新（例如在“渲染”中）。渲染方法应该是道具和状态的纯函数。

class LiTabs extends Component{
    constructor(props, context){
        super(props, context);

        ["showCloseTabs",].forEach((method) => {
            this[method] = this[method].bind(this);
        });

        this.state = {
            closeTabs: false,
        };
    }

    showCloseTabs(e){
        this.setState({
            closeTabs : true, 
        })
        console.log(e);
    }

    render(){
        return(
            <>
            {this.props.tabsLi.map((value, index) =>
                <li key={index} onMouseOver={this.showCloseTabs(this)}>
                    <span>{value}</span>
                    <div onClick={this.props.removeTab.bind(this, value, index)} >
                        {this.state.closeTabs === true && (
                            <Icon icon="cerrar" className='ico-cerrar'/>
                        )}
                    </div>
                </li>
            )}         
            </>
        );
    }
}

class-litab扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
[“showCloseTabs”，].forEach（（方法）=>{
this[method]=this[method].bind（this）；
});
此.state={
关闭选项卡：false，
};
}
显示关闭选项卡（e）{
这是我的国家({
关闭选项卡：是的，
})
控制台日志（e）；
}
render（）{
返回(
{this.props.tabsLi.map（（值，索引）=>

{value}
{this.state.closeTabs===true&&(
)}

)}         
);
}
}

您在

this.showCloseTabs（this）

上缺少绑定，导致它直接调用它

公平地说，您可能只需要将

（这）

一起删除（因此即使在映射函数中没有绑定）

在这两种情况下，您都可以将

onMouseOver

属性更改为

onMouseOver={this.showCloseTabs}

完成它：）

您缺少对

this.showCloseTabs（this）

的绑定，这会导致它直接调用它

公平地说，您可能只需要将

（这）

一起删除（因此即使在映射函数中没有绑定）

在这两种情况下，您都可以将

onMouseOver

属性更改为

onMouseOver={this.showCloseTabs}

使用它：）

this.showCloseTabs（this）

是JavaScript中的函数调用，这意味着在调用

render

方法时调用该函数

此函数正在执行一个导致错误的

setState

：

无法在现有状态转换期间更新（例如在

渲染

）。渲染方法应该是道具和工具的纯功能国家

需要传递给

onMouseOver

或

onClick

的是对函数的引用。对于

showCloseTabs

，这将是：

onMouseOver={this.showCloseTabs}

如果需要传递参数：

onMouseOver={(e) => this.showCloseTabs(e)}

在

render

中绑定方法也会在调用render时创建新函数。相反，您可以在构造函数中绑定它：

constructor() {
  this.onMouseOver = this.onMouseOver.bind(this);
}

this.showCloseTabs（this）