Tengo este estado y lo paso a ChatIO
var [chatRoomIDs, setIDofRoom ] = React.useState(0); const changeChatRoomID = (id) => { setIDofRoom(chatRoomIDs = id); // write new state to state name. this function can be handed down to any component } return ( <div className="container"> <ChatIO chatroomID={chatRoomIDs} chatRoomFunction={changeChatRoomID}/> </div> )Cuando estoy en ChatIO y hago esto:
<Button onClick={() => props.chatRoomFunction(100283100)}variant="contained">senden</Button>Todo funciona bien. El estado se cambia a ID 100283100 y react reacciona al cambio de estado.
Pero cuando hago esto:
<Button onClick={() => buttonClick()}variant="contained">senden</Button> function buttonClick() { SendMessage() props.chatRoomFunction(100283100) }Se llama a la función del padre (puedo ver con la ayuda de alertas) pero reaccionar NO reacciona al cambio de estado.
¿Cómo puedo alterar mi código que reacciona reacciona (odio decir eso una y otra vez)... al cambio de estado cuando se llama desde dentro de una función NO desde un clic de botón?
*** PEQUEÑA EDICIÓN ***
Descubrí que a veces vuelve a renderizar el componente ya veces no. Así que debo estar haciendo algo extraño aquí.
Lo que sea.js
var [chatRoomIDs, setIDofRoom ] = React.useState(0); return ( <div className="container"> <ChatIO chatroomID={chatRoomIDs} chatRoomFunction={setIDofRoom}/> </div> )ChatIO.js
const ChatIO = (props) => { function changeChatRoomId(id) { // sendMessage() // props.chatRoomFunction(100283100) // but you probably want that props.chatRoomFunction(id) } return ( <Button onClick={() => changeChatRoomId(100283100`enter code here`)}variant="contained">senden</Button> ) }