使用 UseEffect() 时显示不更新

Question

在将每个 IP 推送到一个空数组后，我正在尝试呈现一个 IP 地址数组。一旦阵列被填充，我就可以在控制台中正确地看到它，但由于某种原因，它拒绝显示在屏幕上，尽管它已映射。

变量：

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

这是第一个应该在组件挂载时立即触发的useEffect。这工作正常。

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

这是第二个 useEffect，一旦我们从本机 java 代码中获取子网，它就会用可 ping IP 填充空数组。也工作正常，我得到了我需要的数组。

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

这是应该在屏幕上显示数组的渲染函数。日志工作正常，我可以按预期看到数组。它只是拒绝渲染。

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

预先感谢您的帮助。

Answer 1

将您的 ipList 更改为从 useState 派生，如下所示：

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

并在 useEffect

中使用 setIpList

并且不要将 renderIpList() 作为来自 useEffect 的函数调用，它应该在组件 return 语句中。

因此，useEffect 应该更新状态，然后组件呈现状态。

使用 UseEffect() 时显示不更新

Display Not Updating when using UseEffect()

javascript

arrays

react-native

use-effect