REACT 組件呈現然后消失

Question

我只有一個首先獲取設備列表的功能。 該列表是一個 JSON 數組。 然后該函數循環遍歷每個元素並請求陰影。

該函數使用設備屬性和陰影屬性構建一個新數組

REACT 頁面呈現並顯示數據一秒鍾，然后消失。

如果我修改 getShadow 函數以僅返回設備列表（沒有陰影），則頁面渲染得很好。 但是當我使用每個設備的影子數據構建新數組時，問題就開始了。

知道我在這里想念什么嗎？

非常感謝

這是代碼

async function getShadows() { 

    const listThings_command = new ListThingsCommand({});

    const data = await iotClient.send(listThings_command);  /* First get the list of things */ 
    const things = data.things;

    let devices_list = [];  // to store the final array with data to render

    let shadowRequests = things.map (thing => {   /* List calls to get shadow for each thing */ 

      return new Promise((resolve, reject) => {

        const getThingShadow_command = new GetThingShadowCommand({thingName: thing.thingName}); /** get device shadow */ 

        iotDataPlaneClient.send(getThingShadow_command).then(
          (data) => {

            const string_data = new TextDecoder('utf-8').decode(data.payload);  /* Decode payload as it is returned in Uint8Array format*/ 
            const shadow_data = JSON.parse(string_data);

            var deviceInfo = {  /* Create a new object to store required device info*/ 
              thingName : thing.thingName,
              thingTypeName: thing.thingTypeName,
              thingArn : thing.thingArn,
              shadow : shadow_data.state.reported
            };

            resolve(deviceInfo);
          },
          (error) => {

            reject(error);
          }
        ); 
      })
    })

    Promise.all(shadowRequests).then((data) => {
      data.forEach (res => {  /* loop over each promise */ 
        if (res) {
            devices_list.push(res); /* add the data as a new element in the array*/ 
        }
      })
    }
    )

    return devices_list;

  }; 
 
  function Home (){

    const [mydevices, updateMydevices] = React.useState([]);

    useEffect(() => {
      getShadows().then(data => updateMydevices(data)); 
    }, []);    


    return (
      <div className="App">
        <h1>Dashboard</h1> 
        <div>
          <h4>Devices List</h4>
          <ListGroup id="device_list">
              {
                mydevices.map((device, key) => {
                  return (
                    <ListGroup.Item key = {key}> 
                    <div>{device.thingName} </div>
                    </ListGroup.Item>
                  )
                })
              }
            </ListGroup>
        </div> 
      </div>
    );
  }
```

Answer 1

如果此處不使用await ，則會在影子請求完成之前返回設備列表。 所以它總是一個空數組。 你可以嘗試這樣的事情。

try {
    const data = await Promise.all(shadowRequests);
    data.forEach (res => {  /* loop over each promise */ 
        if (res) {
            devices_list.push(res); /* add the data as a new element in the array*/ 
        }
    })
}
catch(err) {
     //handle error
}
return devices_list;