Display Not Updating when using UseEffect()-CodePudding

I am trying to render an array of IP Addresses, after pushing each IP to an empty array. Once the array has been populated, I am able to see it correctly in the console, but for some reason, it refuses to show up on screen despite mapping it.

Variables:

var ipList = [];
let key = 0;
const [subnet, setSubnet]  = useState("");

This is the first useEffect which is supposed to trigger immediately when the component mounts. This is working fine.

useEffect(() =>  {
    const callNativeCode = async () => {
      await ConnectedDevices.displayConnectedDevices( (arrayResponse) => {setArray(arrayResponse), console.log("FIRST NATIVE CALL"   arr)}, (error) => {console.log(error)}  );
  }
  callNativeCode();
  },[])

This is the second useEffect which is supposed to populate the empty array with pingable IPs as soon as we get the subnet from the native java code. Also working fine and I get the array as I need it to be.

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]);

And this is the render function that is supposed to display the array on screen. The log is working fine and I can see the array as intended. It just refuses to render.

  const renderIPList = () => {
    console.log("RENDERING IPS: ", ipList);
    return ipList.map((items,index) => {
      return (
        <View key={index}>
          <Text>{items}</Text>
        </View>
      );    
    });
  };

Thank you in advance for your help.

CodePudding user response：

Change your ipList to be derived from useState like this:

const [ipList, setIpList] = useState([]);

and use the setIpList in your useEffect

and don't call renderIpList() as a function from useEffect that should be in the component return statement.

So, the useEffect should update the state, and then the component renders the state.