Question

我创建了通过单击菜单项创建的选项卡。之后，我希望仅在将鼠标悬停在<li>父对象上方时才显示结束符“ X”。

当我尝试绘制“ X”悬停时，我认为这是一个尚未解决的地图问题，但我不知道如何解决。为什么会出现此错误？ Can not update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

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

Answer 1

您缺少this.showCloseTabs(this)上的绑定，该绑定导致其直接调用

为了公平起见，您可能应该只将(this)一起删除（这样即使在映射功能中也没有绑定）

{this.props.tabsLi.map((value, index) =>
    <li key={index} onMouseOver={this.showCloseTabs.bind(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>
)}

要使用类属性，可以更改方法的声明，例如

showCloseTabs = (e) => { /* ... */ }

在两种情况下，您都可以将onMouseOver属性更改为

onMouseOver={this.showCloseTabs}

并完成它：）

Answer 2

this.showCloseTabs(this)是JavaScript中的函数调用，这意味着在调用render方法时将调用该函数。

此函数正在执行setState，这会导致错误：

在现有状态转换期间（例如在 render）。渲染方法应该是props和状态。

需要传递给onMouseOver或onClick的是对函数的引用。对于showCloseTabs，将是：

onMouseOver={this.showCloseTabs}

如果您需要传递参数：

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

在调用渲染时，也绑定render中的方法会创建新函数。相反，您可以将其绑定到构造函数中：

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

Map函数循环并给出错误-React

2 个答案: