如何将 reactjs 中的常量和 useEffect 从 function 更改为渲染组件

Question

I have this code in a function

function Lobby () {

but I wanted to pass it on to class Lobby extends Component { for a component with

render () {
    return (

but putting these const and useEffect ect.. gives me an error, is there any way to "translate" this into a component?

I thank those who can help me

original code:

   function Lobby () {
    const [message, updateMessage] = useState('')
    const [messages, updateMessages] = useState([])

   

 useEffect(() => {
        const handleNewMessage = newMessage =>
            updateMessages([...messages, newMessage])
        socket.on('chat.message', handleNewMessage)
        return () => socket.off('chat.message', handleNewMessage)
    }, [messages])

   

 const handleFormSubmit = event => {
        event.preventDefault()
        if (message.trim()) {
            socket.emit('chat.message', {
                userid: myId,
                lobby,
                username: username,
                message
            })
            updateMessage('') 
            
const recibesound = document.getElementsByClassName("audio-element")[0]
        recibesound.play()
        
   

 }

}

const handleInputChange = event =>
updateMessage(event.target.value)

////teste
const handleTesteChange = event =>
updateMessage(event.target.value)

const handleTesteSubmit = event => {
    event.preventDefault()
    if (message.trim()) {
        socket.emit('chat.message', {
            userid: myId,
            message
            
   

 })
    updateMessage('') 
   
}

}
///teste



  

  return(  <div>
     //html
    </div>
)}
    
 

   export default Lobby;

goal:

class Lobby extends Component {

// same code


 render() {
   return(

<div>
 //html
</div>

 );
  }
}

Answer 1

From understanding you are attempting to convert your hooks function component to a class component. You cannot use any of your hooks functions in a class component. You have to rewrite your class component using this.setState() instead of the useState hook (instead of updateMessage, and updateMessages) and this.state.message instead of 'message', and using the componentDidUpdate method instead of the useEffect hook. For your functions (handleInputChange), you can define them as method for your class. For your constant (recibesound), you can define it outside your class.

In short, you have to rewrite your component. I recommend viewing a React tutorial on class components.