En mi aplicación, solo quiero mostrar un componente si se cumplen dos condiciones. Desde el padre, esto es lo que parece:
{!online ? ( <TouchableOpacity onPress={changeOnlineStatus} > <Text> Go online </Text> </TouchableOpacity> ) : online && queue === 0 ? ( <TouchableOpacity onPress={changeOnlineStatus} > <Text> Go offline </Text> </TouchableOpacity> ) : ( <Service details={userDetails.queueItems[0].details} /> )} Aquí, el estado changeOnlineStatus simplemente cambia la variable online para que las dos TouchableOpacities cambien. El problema es el componente de servicio. Solo debe representarse si la cola está llena, pero la cola existe como una matriz en un archivo de constantes. En el archivo del componente Servicio, la cola se cambia mediante un temporizador con los siguientes estados/ganchos:
// timer value of 5 const [timeRemaining, setTimeRemaining] = useState(5); // timer counts down to 0 and then removes the first element of the array useEffect(() => { setTimeout(() => { if (timeRemaining > 0) { setTimeRemaining(timeRemaining - 1); } else { userDetails.queueItems.shift(); return; } }, 1000); }, [timeRemaining]);Entonces, cuando se acaba el tiempo, la matriz no tiene elementos, pero el componente Servicio permanece representado. ¿Por qué no se elimina ya que la condición (una matriz poblada) ya no es cierta?
Si es importante, la cola existe en un archivo de constantes y se ve así:
queueItems: [ { title: "Test", }, ]Los componentes se representan solo cuando el estado o las propiedades están cambiando, debe definir la cola como un estado en el componente principal e inyectar la cola y setQueue en el componente de servicio.
Encontré una solución para esto. Como dijo otro usuario, tiene que ver con mutar el estado de la matriz (o un objeto) sin cambiar su referencia. Una explicación más detallada se puede encontrar aquí .
La solución es muy fácil e implica hacer una copia de la matriz con el operador de propagación de la siguiente manera:
const [queue, setQueue] = useState(userDetails.queueItems); const copiedQueue = [...queue];Dado que React solo se volverá a procesar cuando la referencia haya cambiado, la simple edición de la matriz/objeto no activará una nueva representación, ya que la referencia para las matrices y los objetos de JavaScript no cambia cuando se cambia la matriz o el objeto.
Esto solo se puede lograr creando una copia de la matriz u objeto, y esa copia tendrá una referencia diferente. Entonces, cuando necesito que el estado cambie para esta matriz, en lugar de cambiarlo directamente con setQueue , debería haber estado actualizando copiedQueue y configurando el estado de la queue con copiedQueue así:
copiedQueue.shift(); setQueue(copiedQueue);Y dado que estaba haciendo este cambio en un componente separado, simplemente necesitaba pasar un accesorio al componente para poder actualizar el estado desde allí. Cambié:
const [timeRemaining, setTimeRemaining] = useState(5); useEffect(() => { setTimeout(() => { if (timeRemaining > 0) { setTimeRemaining(timeRemaining - 1); } else { userDetails.queueItems.shift(); return; } }, 1000); }, [timeRemaining]);A:
useEffect(() => { setTimeout(() => { if (timeRemaining > 0) { setTimeRemaining(timeRemaining - 1); } else { // this is the prop passed in the parent // in the parent it's a function that updates the state onChange(true); return; } }, 1000); }, [timeRemaining]);¡Espero que esto ayude a alguien en el futuro!