时间戳

首页 > 解决方案 > 处理来自 Promises React Native 的多个响应

javascript - 处理来自 Promises React Native 的多个响应

问题描述

我有一些返回 Promise 响应的函数。我现在正试图抓住所有这些并将所有数据发送到后端。但是，我不知道如何抓住它们。我有它：

   componentDidMount() {
    Promise.all([
        this.getFunction1Data(ONEDAYINTERVAL), //returns an array of objects
        this.getFunction2Data(ONEDAYINTERVAL),
        this.getFunction3Data(ONEDAYINTERVAL),

    ]).then(([response1, response2, response3]) => {
        this.sendDataToServer(response3);
        // do stuff with your data
    }).catch(e => console.error);

}

但这里的问题是，不知何故，它们都是混合的。

示例：有时 reponse2 包含来自所有三个函数的数据，有时 response3 包含所有需要的数据，而 response2 缺少一些对象。我将如何解决这个问题？是否应该有一些函数可以从所有响应中形成一个数组（检查元素是否存在）还是有办法解决？只是为了仔细检查，我在这里添加了一个函数示例（其他的相同）：

 getFunction1Data(dateFrom) {

    return new Promise((resolve) => {
        AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
            if (err) {
                return;
            }

            AppleKit.getSamples(dateFrom, (err, results) => {
                if (err) {
                    return resolve([]);
                }
                const newData = results.map(item => {
                    return { ...item, name: "Item1" };
                });
                const allData = [...this.state.ActivityItem, ...newData];
                this.setState({ ActivityItem: allData });
                resolve(allData);
            });
        })
    })
}

更新 第二个功能：

  getFucntion2Data(dateFrom) {

    return new Promise((resolve) => {
        AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
            if (err) {
                return;
            }

            AppleHealthKit.getStepsSample(datefrom, (err, results) => {
                if (err) {
                    return resolve([]);
                }
                const newData = results.map(item => {
                    return { ...item, name: "StepsSample" };
                });
                this.setState(({ActivityItem}) => {
                    ActivityItem = [...ActivityItem, ...newData];
                    resolve(ActivityItem);
                    return { newData }
                });
            });
        })
    })
}

标签： javascriptreactjsreact-nativeasynchronouspromise

解决方案

主要问题在这里getFunction1Data：

 const allData = [...this.state.ActivityItem, ...newData];
 this.setState({ ActivityItem: allData });

您正在根据现有状态设置状态。每当您这样做时，您都需要使用 的回调形式setState，而不是直接将状态传递给的形式。原因是状态更新可能是异步的，并且当您在渲染之间进行多次更改时会“批量”更新。因此this.state.ActivityItem，当您构建要提供的新状态时，可能会过时setState。

要使用回调表单，根本不需要allData，并且执行以下操作：

 this.setState(({ActivityItem}) => {
     ActivityItem = [...ActivityItem, ...newData];
     resolve(ActivityItem);
     return { ActivityItem }
 });

单独的问题是您每次调用都getFunction1Data返回（通过承诺）所有收集的数据，而不仅仅是该调用收集的数据。我并不完全清楚你想要做什么，但我倾向于getFunction1Data只返回它收集的数据（newData），而不是所有数据，或者修改它以便它获得你想要获得的所有信息，不只是三分之一，所以你可以只调用一次。

推荐阅读