Javascript 仅显示悬停在地图上的项目

我真的很惊讶这不是我预期的工作

我想在访问站点的人将鼠标悬停在用户的消息上时显示用户名。下面是我到目前为止的代码。问题是，当我将鼠标悬停在消息上时，我映射到的数组中的每个用户名都会出现。我如何更改它，使其仅为一个用户名

我想我需要在一个单独的组件中更改每个用户消息的状态，但是，我不认为这是必要的

class App extends Component {

    state = {
        showUsername: false
    };

    showUsername = () => {

        this.setState({
            showUsername: true
        });

    }

    hideUsername = () => {

        this.setState({
            showUsername: false
        });

    }

    render() {

        let messageArr = this.props.messages.map(msg => {

            let name = `${msg.firstName} ${msg.lastName}`;

            return(
                <div key={msg.id}>

                    {this.state.showUsername && (
                        <span>{name}</span>
                    )}

                    <li><span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span></li>
                </div>
            );
        });

        return (
            <ul>
                {messageArr}
            </ul>
        );
    }
}

类应用程序扩展组件{
状态={
showUsername:false
};
showUsername=（）=>{
这是我的国家({
showUsername:true
});
}
hideUsername=（）=>{
这是我的国家({
showUsername:false
});
}
render（）{
让messageArr=this.props.messages.map（msg=>{
让name=`${msg.firstName}${msg.lastName}`；
返回(
{this.state.showUsername&&(
{name}
)}
{msg.message}
);
});
返回(

{messageArr}

);
}
}

我想我需要在一个单独的组件中更改每个用户消息的状态，但是，我不认为这是必要的

是的，这是必要的

到目前为止，有一种常见的状态

showUsername

用于显示用户名，这就是为什么会产生这种效果

showUsername = (oneUserMessage) => {

    oneUserMessage.showUsername = true; // updating via reference
}

hideUsername = (oneUserMessage) => {

    oneUserMessage.showUsername = false;// updating via reference

}

//在渲染中返回

return (
            <div key={msg.id}>

                {msg.showUsername && (
                    <span>{name}</span>
                )}
                <li><span 
                  onMouseEnter={()=>{this.showUsername(msg)}} 
                  onMouseLeave={()=>{this.hideUsername(msg)}}>       
                  {msg.message}</span></li>


            </div>
        );

返回(
{msg.showUsername&&(
{name}
)}
{this.showUsername（msg）}
onMouseLeave={（）=>{this.hideUsername（msg）}}>
{msg.message}
);

您的组件是这样运行的，因为

this.state.showUsername

是组件内部的一种状态。 因此，无论哪个div处于悬停状态，它都会将

状态设置为
true
，其他所有div都会将
此.state.showUsername
作为
true
接收

这使它们都可见

您应该做的是，编写一个包含
div
及其内部逻辑的新组件。因此，当您向下映射时，每个
div
都有自己的状态

另一件事，你可以这样绘制地图：

        const messageArr = this.props.messages.map((msg) => <div key={msg.id}>
            <li>
               <span onMouseEnter={this.showUsername} onMouseLeave{this.hideUsername}>{msg.message}</span>
            </li>

        </div>);

const messageArr=this.props.messages.map（（msg）=>

{msg.message}

);

所以不需要返回语句：）