Estoy tratando de representar una matriz de direcciones IP, después de enviar cada IP a una matriz vacía. Una vez que se ha llenado la matriz, puedo verla correctamente en la consola, pero por alguna razón, se niega a aparecer en la pantalla a pesar de mapearla.
Variables:
var ipList = []; let key = 0; const [subnet, setSubnet] = useState("");Este es el primer useEffect que se supone que se activa inmediatamente cuando se monta el componente. Esto está funcionando bien.
useEffect(() => { const callNativeCode = async () => { await ConnectedDevices.displayConnectedDevices( (arrayResponse) => {setArray(arrayResponse), console.log("FIRST NATIVE CALL" + arr)}, (error) => {console.log(error)} ); } callNativeCode(); },[])Este es el segundo useEffect que se supone que debe llenar la matriz vacía con direcciones IP que se pueden hacer ping tan pronto como obtengamos la subred del código Java nativo. También funciona bien y obtengo la matriz como la necesito.
useEffect(() => { const ipLoop = async () => { if( subnet != "") { for(let i = 1; i<=254; i++) { let ipAddress = subnet + "." + i; try{ const ip = await Ping.start(ipAddress, {timeout: 100}); const { receivedNetworkSpeed,sendNetworkSpeed,receivedNetworkTotal,sendNetworkTotal } = await Ping.getTrafficStats(ipAddress, {timeout:1000}); console.log(ipAddress + " Network Stats: " + receivedNetworkSpeed,sendNetworkSpeed,receivedNetworkTotal,sendNetworkTotal); key = i; ipList.push(key , ipAddress); } catch(error) { console.log(i + " Error Code: " + error.code + " ," + error.message) } } renderIPList(); } } ipLoop(); },[subnet]);Y esta es la función de representación que se supone que muestra la matriz en la pantalla. El registro funciona bien y puedo ver la matriz según lo previsto. Simplemente se niega a renderizar.
const renderIPList = () => { console.log("RENDERING IPS: ", ipList); return ipList.map((items,index) => { return ( <View key={index}> <Text>{items}</Text> </View> ); }); };Gracias de antemano por su ayuda.
Cambie su ipList para que se derive de useState de esta manera:
const [ipList, setIpList] = useState([]); y usa setIpList en tu useEffect
y no llame a renderIpList() como una función de useEffect que debería estar en la declaración de devolución del componente.
Entonces, useEffect debería actualizar el estado y luego el componente representa el estado.