Creación de diccionario griego con React Native: Planteamiento y creación del ambiente Pate 1
En
esta ocasión vamos a crear una aplicación con React Native que consistirá en un
diccionario Griego Koiné-Español. Este diccionario no sólo nos permitirá buscar
palabras, sino que también nos mostrará el texto griego del Nuevo Testamento, y
cuando el usuario haga clic en una palabra, mostrará su traducción y una lista
de libros donde aparece la palabra seleccionada.
Además
de mostrar la traducción de la palabra cliqueada, vamos a mostrar una lista de
artículos y comentarios donde se habla acerca de los textos en los aparece
dicha palabra.
Herramientas
a Usar
1.Diccionario
Griego Hebreo Strong api: https://github.com/openscriptures/strongs/blob/master/todo-diffs.txt
2.
Texto griego del Nuevo Textamnete APi: https://github.com/tyndale/STEPBible-Data
3.
Api Blible https://scripture.api.bible/
Manos a la obra
Sigue:
Creación de diccionario griego con React Native: Creación del api con Node Js, express, Firebase Functions y Firestore Parte 1
React Warning: Cannot update a component from inside the function body of a different component
Pedro Lara
A partir de
la versión v16.13.0 de React, cuando se intenta actualizar un Hook de un
componente desde el interior de otro nos muestra este warning: Warning: Cannot update a component from
inside the function body of a different component
En mi caso particular, el error me aparece al intentar realizar el siguiente
proceso:
Tengo un componente funcional que implementa un ListItem, si el usuario hace clic en este elemento debe llamar una función que muestra un console.log y actualiza un Hook useState. Sin embargo, esto no sucede, al contrario, me muestra el warning ya mencionado y no me actualiza el useState:
import React, {useState} from 'react';
import { ListItem,Icon} from 'react-native-elements'
import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";
const OptionsAccount = ()=>{
const [showModal, setShowModal] = useState(null)
const [redeCompoenent, setRenderComponenet] = useState(null)
const generateOptions =()=>{
return =[
{title: "Cambiar Nombre"
iconNameLeft:"account-circle"
iconColorLeft:"#DAF7A6"
iconNameRight:"chevron-right"
iconColorRight:"#DAF7A6"
onPress: ()=>selectedComponent("name")
},
{title: "Cambiar Email"
iconNameLeft:"account-circle"
iconColorLeft:"#DAF7A6"
iconNameRight:"chevron-right"
iconColorRight:"#DAF7A6"
onPress: ()=>selectedComponent("email")
},
{title: "Cambiar Password"
iconNameLeft:"account-circle"
iconColorLeft:"#DAF7A6"
iconNameRight:"chevron-right"
iconColorRight:"#DAF7A6"
onPress: ()=>selectedComponent("password")
}
]
}
const selectedComponenet = (key)=>{
console.log(key)
setShowModal(true)
}
const menuOptions = generateOptions();
return(
{
list.map(menuOptions, (menu, index) => (
{menu.title}
))
}
Modal
)
}
const styles = StyleSheet.create({
})
export default OptionsAccount;
Esto es estraño porque parecería que ahora no se puede realizar algo que hemos estado haciendo desde hace mucho tiempo, que además fue recomendado por el equipo de React.
He encontrado mucha información sobre este error, pero muy confusa y las soluciones que ofrecen no fueron efectivas en mi caso, por ejemplo, en https://flaviocopes.com/react-update-while-rendering-different-component/ dicen que colocando un Hook useEffect resuelve el problema, sin embargo, en mi caso no funcionó.
En este otro hilo se generó un acalorado debate en el que incluso intervino Dan Abramov creador de Redux. Pero, no ofrecen una solución efectiva en mi caso: https://github.com/facebook/react/issues/18178
En febrero del 2020 el equipo de React anunció sobre algunas advertencias que se presentarían en la versión 16.13.0: https://reactjs.org/blog/2020/02/26/react-v16.13.0.html
En mi caso, para resolver el problema, procedí a pasarle el Hook setRednerComponent a la función selectedComponent:
onPress: ()=>selectedComponent("
¿ Qué es un CallBack? en javaScript
Micrófono económico para profesores
Cómo conectar dos micrófonos a una sola entrada de audio de cámara DSRL
.png)
