Estoy tratando de actualizar mi componente cada vez que cambia el accesorio:
export default function ChatMessages(props) { const [chatRooms, setChatRooms] = React.useState([]); React.useEffect(() => { (async () => { var x = await GetMessages(props.statePassDown); console.log(x); setChatRooms(x); })(); }, []); return ( <div class="mainChatView"> <div>{props.statePassDown}</div> {chatRooms.map((chatRoom, index) => { return ( <ul> <li key={index}> <table> <tr> <td> chatID: {chatRoom.chatID} <br></br> message: {chatRoom.message} </td> </tr> </table> </li> </ul> ); })} </div> ); }Pero desafortunadamente, este código solo se llama una vez. Puedo ver que el accesorio cambia a través de este div:
<div>{props.statePassDown}</div>Esta línea se vuelve a representar cada vez que se presiona un botón dentro de otro componente, pero no toda la función de mapeo.
¿Cómo puedo modificar mi código para que responda al cambio en props.statePassDown ?
Está configurando explícitamente el efecto para que no tenga dependencias:
React.useEffect(()=>{ // ... }, []); // <-- empty dependenciesEso significa que solo se ejecutará en el montaje del componente. (Si no pasa ninguna matriz de dependencia, el efecto se ejecuta después de cada actualización de componente).
Cambie las dependencias para que el efecto se ejecute cuando cambien esos valores.
React.useEffect(()=>{ // ... }, [props.statePassDown]);export default function ChatMessages(props) { const [chatRooms, setChatRooms] = React.useState([]); React.useEffect(()=>{ (async () => { var x = await GetMessages(props.statePassDown) console.log(x) setChatRooms(x) })() },[props.statePassDown]) // pass what you are trying to watch change ... // ... here in the dependency arrayAdemás, una buena cosa a tener en cuenta sobre el enlace useEffect es que la declaración de devolución dentro de un enlace useEffect se activará en el ciclo de vida desmontado del componente. ex.
useEffect(() => { // ... on component mount return () => { // ... component did unmount } }, [/* dependency array */]);