Отображение не обновляется при использовании UseEffect()

Я пытаюсь отобразить массив IP-адресов после нажатия каждого IP-адреса на пустой массив. После заполнения массива я могу правильно увидеть его в консоли, но по какой-то причине он отказывается отображаться на экране, несмотря на его сопоставление.

Переменные:

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

Это первый useEffect, который должен срабатывать немедленно при монтировании компонента. Это работает нормально.

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

Это второй useEffect, который должен заполнить пустой массив IP-адресами, которые можно проверить, как только мы получим подсеть из собственного кода Java. Также работает нормально, и я получаю массив так, как мне нужно.

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.info(ipAddress + " Network Stats: " + receivedNetworkSpeed,sendNetworkSpeed,receivedNetworkTotal,sendNetworkTotal);
            key = i;
            ipList.push(key , ipAddress);
          }
          catch(error) 
          {
            console.info(i + " Error Code:  " + error.code + " ," + error.message)
          }
        }
        renderIPList();
      }
    }
    ipLoop();

  },[subnet]);

И это функция рендеринга, которая должна отображать массив на экране. Журнал работает нормально, и я вижу массив, как и предполагалось. Он просто отказывается отображать.

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

Спасибо заранее за вашу помощь.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Измените свой ipList на производный от useState следующим образом:

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

и используйте setIpList в своем useEffect

и не вызывайте renderIpList() как функцию из useEffect, которая должна быть в операторе возврата компонента.

Итак, useEffect должен обновить состояние, а затем компонент отобразит состояние.

Это сработало как шарм. Большое спасибо.

Chris 17.03.2022 10:24

Другие вопросы по теме