Javascript React-onClick方法在第一次选择时给出undefined，传递的值不相同？

我曾尝试创建此用户列表，单击这些用户会打开相应的用户消息，但在第一次单击时，传递了一个“未定义”值，然后

我尝试过搜索这个问题，也尝试过github寻找相关的代码，但没有任何可靠的结果

我有以下代码：-

//code where the selection takes place 
 setselectRoomId(id)
   {
       this.toggleMessageContainer(false,true);
       this.setState({selectedRoomid:id});
   }
//code where the effect on changing selection should take place 
loadConversation(id)
    {
        this.setState({isLoading:true,disableTextArea:true})
        let room=(id) ? id : this.props.selectedRoomid
        //let data={room:selectedRoomId}
        axios('/chat/messages/'+room).then(res=>{
            this.setState({messages:res.data.messages,isLoading:false,disableTextArea:false});
             console.log(res);
        }).catch(err=>{
            console.log(err);
        });
    }
// front end code where click event occurs
    render()
    {
        let {showRoomPanel,onlinerooms}=this.props;
        let {activeRoom,isLoading,currentUser}=this.state;
        let roomStyle=(showRoomPanel==false) ?"rooms-panel hide-div":"rooms-panel"
        return(
            <div className={roomStyle}>
              { (isLoading===true) ? <Spinner></Spinner>:
                 this.state.rooms.map((room)=>{
                     return <Roominfo
                        key={room.room}
                        userInfo={currentUser}
                        activeRoomId={activeRoom}
                        onlinerooms={onlinerooms}
                        senderName={room.senderName}
                        senderId={room.senderId}
                        setSelectedRoomId={this.setSelectedRoomid.bind(this,room.room)}/>
                 })

              }


   // the onclick event
  const RoomInfo=({senderName,roomId,senderId,setSelectedRoomId,activeRoomId})=>{
       const allConstants= new Constants();
       return(
           <div className={(activeRoomId==roomId) ? "room-info active-room":"room-info"} onClick={setSelectedRoomId}>
               <div className='room'>
                  <p> {senderName}</p>
               </div>
           </div>
       );
    }
                    </div>
                );
            }

//选择发生的代码
设置电子组id（id）
{
this.toggleMessageContainer（false，true）；
this.setState（{selectedRoomid:id}）；
}
//应在其中对更改选择产生影响的代码
加载会话（id）
{
this.setState（{isLoading:true，disableTextArea:true}）
let room=（id）？id:this.props.selectedRoomid
//let data={room:selectedRoomId}
axios（'/chat/messages/'+room）。然后（res=>{
this.setState（{messages:res.data.messages，isLoading:false，disableTextArea:false}）；
控制台日志（res）；
}).catch（错误=>{
控制台日志（err）；
});
}
//发生单击事件的前端代码
render（）
{
让{showRoomPanel，onlinerooms}=this.props；
让{activeRoom，isLoading，currentUser}=this.state；
让roomStyle=（showRoomPanel==false）？“房间面板隐藏div”：“房间面板”
返回(
{（isLoading==true）？：
this.state.rooms.map（（room）=>{
返回
})
}
//onclick事件
const RoomInfo=（{senderName，roomId，senderId，setSelectedRoomId，activeRoomId}）=>{
常量allConstants=新常量（）；
返回(
{senderName}

);
}
);
}

//房间面板类

import React,{Component} from 'react';
import axios from 'axios';
import Roominfo from './Roominfo';
import {Spinner} from 'reactstrap';
import Constants from '../Constants';
import decode from 'jwt-decode';
import '../Styles/RoomPanel.css';
class Roompanel extends Component{
    state={
        rooms:[],
        isLoading:true,
        message:null,
        currentUser:null
    }
    constructor(props)
    {
        super(props);
        this.allConstants=new Constants();        
    }
    componentDidMount()
    {
        this.loadRooms()
    }
    loadRooms()
    {
        //let allConstants=this.allConstants
        const token=decode(localStorage.getItem('token'));
        const rid=token.id;
        this.setState({currentUser:rid});
        const data={rid:rid}
        axios.get('/chat/user/'+rid).then(res=>{
               //console.log(res.data.users);
               this.setState({rooms:res.data.users,isLoading:false});

        }).catch(err=>{
              console.log(err);
              this.setState({isLoading:false,message:'error occured'});
        });
    }
    setSelectedRoomId(id)
    {
        this.props.setselectRoomId(id)
        //console.log(this.props.selectedRoomid)
        this.setState({activeRoom:id});
    }
    render()
    {
        let {showRoomPanel,onlinerooms}=this.props;
        let {activeRoom,isLoading,currentUser}=this.state;
        let roomStyle=(showRoomPanel==false) ?"rooms-panel hide-div":"rooms-panel"
        return(
            <div className={roomStyle}>
              { (isLoading===true) ? <Spinner></Spinner>:
                 this.state.rooms.map((room)=>{
                     return <Roominfo
                        key={room.room}
                        userInfo={currentUser}
                        activeRoomId={activeRoom}
                        onlinerooms={onlinerooms}
                        senderName={room.senderName}
                        senderId={room.senderId}
                        setSelectedRoomId={this.setSelectedRoomId.bind(this,room.room)}/>
                 })

              }
            </div>
        );
    }

}
export default Roompanel;

import React，{Component}来自'React'；
从“axios”导入axios；
从“/Roominfo”导入Roominfo；
从“reactstrap”导入{Spinner}；
从“../Constants”导入常量；
从“jwt解码”导入解码；
导入“../Styles/RoomPanel.css”；
类Roompanel扩展组件{
陈述={
房间：[]，
孤岛加载：是的，
消息：空，
当前用户：空
}
建造师（道具）
{
超级（道具）；
this.allConstants=新常量（）；
}
componentDidMount（）
{
这是装载室（）
}
装货室（）
{
//让allConstants=this.allConstants
const token=decode（localStorage.getItem（'token'）；
const rid=token.id；
this.setState（{currentUser:rid}）；
常量数据={rid:rid}
get（'/chat/user/'+rid）。然后（res=>{
//console.log（res.data.users）；
this.setState（{rooms:res.data.users，isLoading:false}）；
}).catch（错误=>{
控制台日志（err）；
this.setState（{isLoading:false，消息：'error Occursed'}）；
});
}
setSelectedRoomId（id）
{
此.props.setElectromid（id）
//console.log（this.props.selectedRoomid）
this.setState（{activeRoom:id}）；
}
render（）
{
让{showRoomPanel，onlinerooms}=this.props；
让{activeRoom，isLoading，currentUser}=this.state；
让roomStyle=（showRoomPanel==false）？“房间面板隐藏div”：“房间面板”
返回(
{（isLoading==true）？：
this.state.rooms.map（（room）=>{
返回
})
}
);
}
}
导出默认房间面板；

//应该在其中发生效果的消息面板类

import React,{Component} from 'react';
import axios from 'axios';
import Message from './Message';
import WriteMessage from './WriteMessage';
import {Spinner} from 'reactstrap';
import '../Styles/MessagePanel.css';
class MessagePanel extends Component{
    state={
        messages:[],
        isLoading:false,
        disableTextArea:true

    }
    constructor(props)
    {
        super(props);
         this.onLineRoom=this.onLineRoom.bind(this);
    }
    componentDidMount()
    {
        this.scrollToBottoom()
    }
    componentWillUpdate()
    {
        this.scrollToBottoom()
    }
    scrollToBottoom()
    {
        this.messageEnd.scrollIntoView({behaviour:'smooth'});
    }
    componentWillReceiveProps(nextProps)
    {

            this.loadConversation(nextProps.selectedRoomId)
            console.log(this.props.selectedRoomid)

    }
    loadConversation(id)
    {
        this.setState({isLoading:true,disableTextArea:true})
        let room=(id) ? id : this.props.selectedRoomid
        //let data={room:selectedRoomId}
        axios('/chat/messages/'+room).then(res=>{
            this.setState({messages:res.data.messages,isLoading:false,disableTextArea:false});
             console.log(res);
        }).catch(err=>{
            console.log(err);
        });
    }
    onNewMessageArrival(data)
    {
        let newMessages=[...this.state.messages]
        if(data.room==this.props.selectedRoomId)
        {
            this.setState((prevState,props)=>({
                messages:[...this.state.messages,{...data}]
            }));
        }
      this.props.fillRoomInfoFromSocket(data)
    }
    onLineRoom(roomsOnline)
    {
        this.props.notifyOnlineRooms(roomsOnline);
    }
    render()
    {
        let {messages,isLoading,disableTextArea}=this.state
        let{selectedRoomId,showMessagePanel}=this.props
        let messageStyle=(showMessagePanel==true) ? "message-panel":"message-panel hide-div"
        return(
            <div className={messageStyle}>
                <div className='show-messages'>
                    {
                        (isLoading==true) ? <Spinner></Spinner> :
                         messages.map(message=>{
                             return <Message key={message.id} Message={message.Message} senderId={message.senderId} recieverId={message.recieverId} />
                         })
                }
                     <div style={{ float: "left", clear: "both" }} ref={(el) => { this.messageEnd = el; }}></div>   
                </div>
                <WriteMessage
                   isDisabled={disableTextArea}
                  // userInfo={userInfo}
                   selectedRoomId={selectedRoomId}
                   onLineRoom={this.onLineRoom}
                   onNewMessageArrival={this.onNewMessageArrival.bind(this)}/>
            </div>
        );
    }
}
export default MessagePanel;

import React，{Component}来自'React'；
从“axios”导入axios；
从“/Message”导入消息；
从“/WriteMessage”导入WriteMessage；
从“reactstrap”导入{Spinner}；
导入“../Styles/MessagePanel.css”；
类MessagePanel扩展组件{
陈述={
信息：[]，
孤岛加载：false，
disableTextArea:true
}
建造师（道具）
{
超级（道具）；
this.onLineRoom=this.onLineRoom.bind（this）；
}
componentDidMount（）
{
this.scrollToBottom（）
}
componentWillUpdate（）
{
this.scrollToBottom（）
}
ScrollToBottom（）
{
this.messageEnd.scrollIntoView（{行为：'smooth'}）；
}
组件将接收道具（下一步）
{
this.loadConversation（nextrops.selectedRoomId）
console.log（this.props.selectedRoomid）
}
加载会话（id）
{
this.setState（{isLoading:true，disableTextArea:true}）
let room=（id）？id:this.props.selectedRoomid
//let data={room:selectedRoomId}
axios（'/chat/messages/'+room）。然后（res=>{
this.setState（{messages:res.data.messages，isLoading:false，disableTextArea:false}）；
控制台日志（res）；
}).catch（错误=>{
控制台日志（err）；
});
}
onnewmessagainer（数据）
{
让newMessages=[…this.state.messages]
if（data.room==this.props.selectedRoomId）
{
this.setState（（prevState，props）=>({
消息：[…this.state.messages，{…data}]
}));
}
this.props.fillRoomInfoFromSocket（数据）
}
联机室（roomsOnline）
{
this.props.notifyOnlineRooms（roomsOnline）；
}
render（）
{
让{messages，isLoading，disableTextArea}=this.state
让{selectedRoomId，showMessagePanel}=this.props
让messageStyle=（showMessagePanel==true）？“消息面板”：“消息面板隐藏div”
返回(
{
（isLoading==真）？：
messages.map（message=>{
返回
})
}
{this.messageEnd=el；}}>
);
import React,{Component} from 'react';
import Constants from './Constants';
import Roompanel from './Rooms/Roompanel';
import MessagePanel from './Message/MessagePanel'; 
class Messagecontainer extends Component{
   state={
       showMessagePanel:true,
       showRoomPanel:true,
       onlinerooms:[]
   }
   constructor(props)
   {
       super(props);
       this.setselectRoomId=this.setselectRoomId.bind(this);
       this.fillRoominfointoSocket=this.fillRoominfointoSocket.bind(this);
       this.notifyOnlinerooms=this.notifyOnlinerooms.bind(this);

   }
   fillRoominfointoSocket(message)
   {
       this.setState({newMessageFromSocket:message});
   }
   componentDidMount()
   {
       this.toggleMessageContainer(true,false);
   }
   toggleMessageContainer(showRoomPanel,showMessagePanel)
   {
       if(window.innerWidth<500)
       {
        this.setState({showRoomPanel,showMessagePanel});
       }
   }
   setselectRoomId(id)
   {
       this.setState({selectedRoomid:id});
       this.toggleMessageContainer(false,true);

   }
   notifyOnlinerooms(rooms)
   {
       this.setState({onlinerooms:rooms});
   }
   render()
   {
    let{showMessagePanel,showRoomPanel,selectedRoomid,newMessageFromSocket,onlinerooms}=this.state;
    if(window.innerWidth<500)
    {
        showMessagePanel=false;
        showRoomPanel=true;
    }
       return(
           <div className='content'>
            <Roompanel 
            showRoomPanel={showRoomPanel}
            onlinerooms={onlinerooms}
            setselectRoomId={this.setselectRoomId}
            selectedRoomid={this.state.selectedRoomid}
            newMessageFromSocket={newMessageFromSocket}/>
            <MessagePanel
            showMessagePanel={showMessagePanel}
            selectedRoomid={selectedRoomid}
            fillRoominfointoSocket={this.fillRoominfointoSocket}
            notifyOnlinerooms={this.notifyOnlinerooms}/>
           </div>
       );
   }
}
export default Messagecontainer;

setSelectedRoomId={this.setselectRoomId.bind(this,room.room)}

<div className={(activeRoomId==roomId) ? "room-info active-room":"room-info"} onClick={this.setSelectedRoomId.bind(this, roomId)}>

const sum = function(a, b) {
  return a+b
}

const sumOfThreeAndFive = sum.bind(this, 3, 5)

console.log(sumOfThreeAndFive()) // 3 + 5 -> 8

<div value={roomId} onClick={setSelectedRoomId} className={(activeRoomId==roomId) ? "room-info active-room":"room-info"}>

setselectRoomId(e){
       const id = e.target.value
       this.toggleMessageContainer(false,true);
       this.setState({selectedRoomid:id});
   }