地図の後に反応したアイテムだけが表示されます

Question

私は予想通りこれがうまくいかないことに本当に驚いています。

私がサイトを訪問する人は、ユーザーのメッセージの上に置いたときにユーザー名を表示したいです。以下は私がこれまで持っていたコードです。問題は、メッセージ上にカーソルを置くと、マップされた配列のすべてのユーザー名が表示されることです。これを変更して1つのユーザー名にするにはどうすればよいですか？私は別のコンポーネント内の各ユーザーのメッセージに状態を変更する必要があると思います

は、しかし、私はこれはneccessaryであるべきと思っていないでしょう。

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

Answer 1

私はしかし、私はこれが必要であるべきと思っていないだろう、別のコンポーネント内の各ユーザーのメッセージに状態を変更する必要があると思います。

yes.Its必要。今のよう

は、一つの共通の状態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> 
     ); 

Answer 2

this.state.showUsernameは、コンポーネントの内部状態であるので、あなたのコンポーネントは、次のように動作しているが。レンダリングで返します だから、ホバリングされた方のdiv、それはstatetrueに設定されます、そして、あなたの他のすべてのいずれかtrueとしてthis.state.showUsernameを受け取ることになります。

これですべてが表示されます。あなたは何をすべき

はそれの内部divを持つ新しいコンポーネントやロジックを記述しています。だから、あなたがそれらをマップするとき、あなたはそれぞれdivsがそれ自身の状態を持つでしょう。

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

     </div>); 

return文のためので必要はありません:)

：

もう一つは、あなたがこのようなマップを行うことができます