Reactjs 节点异步映射在redux操作中未正确执行

我连接到以以下格式返回数据的API：

[
    {
        "id": 23,
        "name": "11:40AM July 2",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [
            {
                "id": 4,
                "name": "Hallway",
                "notes": "Any devices present in the hallway",
                "_pivot_device_id": 23,
                "_pivot_group_id": 4
            },
            {
                "id": 5,
                "name": "Middle school",
                "notes": "In classrooms 6-8",
                "_pivot_device_id": 23,
                "_pivot_group_id": 5
            }
        ],
        "mac": "123456789ABC"
    },
    {
        "id": 26,
        "name": "1:54PM July 5",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [
            {
                "id": 5,
                "name": "Middle school",
                "notes": "In classrooms 6-8",
                "_pivot_device_id": 26,
                "_pivot_group_id": 5
            }
        ],
        "mac": "123456789ABC"
    }
]

我想修改每个返回的项目并删除多余的数据，因此结果如下：

[
    {
        "id": 23,
        "name": "11:40AM July 2",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [4, 5],
        "mac": "123456789ABC"
    },
    {
        "id": 26,
        "name": "1:54PM July 5",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [5],
        "mac": "123456789ABC"
    }
]

export function getDevices() {
  return function(dispatch) {
    return fetch("http://my-awesome-api:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      async.map(data, fixGroups, async function(error, res) {
        console.log("dispatching...");
        console.log(JSON.stringify(res));
        dispatch({
          type: "GET_DEVICES",
          devices: res
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

export function getDevices() {
  return function(dispatch) {
    return fetch("http://localhost:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      return new Promise((resolve, reject) => {
        async.map(data, fixGroups, (error, results) => {
          console.log("results are " + JSON.stringify(results));
          resolve(dispatch({
            type: "GET_DEVICES",
            devices: results
          });
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

我创建了以下代码以删除多余的数据：

const deleteExcessInfo = async function(group) {
  if(group.id) {
    return group.id;
  } else {
    return null;
  }
}

const modGroups = async function(device) {
  async.map(device.groups, deleteExcessInfo, function(err, res) {
    device.groups = res;
  });
  return device;
}

var newDevices;

async.map(devices, modGroups, (error, results) => {
  console.log("results are " + JSON.stringify(results));
});

当我在一个独立的节点程序（从命令行运行）中执行此代码时，我会在删除多余数据的情况下获得预期的输出。但是，当我将其放入redux操作时，它不起作用，如下所示：

[
    {
        "id": 23,
        "name": "11:40AM July 2",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [4, 5],
        "mac": "123456789ABC"
    },
    {
        "id": 26,
        "name": "1:54PM July 5",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [5],
        "mac": "123456789ABC"
    }
]

export function getDevices() {
  return function(dispatch) {
    return fetch("http://my-awesome-api:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      async.map(data, fixGroups, async function(error, res) {
        console.log("dispatching...");
        console.log(JSON.stringify(res));
        dispatch({
          type: "GET_DEVICES",
          devices: res
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

export function getDevices() {
  return function(dispatch) {
    return fetch("http://localhost:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      return new Promise((resolve, reject) => {
        async.map(data, fixGroups, (error, results) => {
          console.log("results are " + JSON.stringify(results));
          resolve(dispatch({
            type: "GET_DEVICES",
            devices: results
          });
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

我没有看到控制台上打印的“dispatching…”或

res

，因此似乎由于某种原因没有执行回调函数。有没有关于它为什么不起作用以及如何修复的想法？谢谢

我试过的 我试着按照Moonjsit的建议去实现一个承诺，但没有成功。我还尝试在我的Redux行动中实现一个承诺，如下所示：

[
    {
        "id": 23,
        "name": "11:40AM July 2",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [4, 5],
        "mac": "123456789ABC"
    },
    {
        "id": 26,
        "name": "1:54PM July 5",
        "airplayEnabled": false,
        "airplayCodeEnabled": true,
        "type": 0,
        "groups": [5],
        "mac": "123456789ABC"
    }
]

export function getDevices() {
  return function(dispatch) {
    return fetch("http://my-awesome-api:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      async.map(data, fixGroups, async function(error, res) {
        console.log("dispatching...");
        console.log(JSON.stringify(res));
        dispatch({
          type: "GET_DEVICES",
          devices: res
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

export function getDevices() {
  return function(dispatch) {
    return fetch("http://localhost:1357/device", {mode: "cors"})
    .then(handleErrors)
    .then(json)
    .then(function(data) {
      return new Promise((resolve, reject) => {
        async.map(data, fixGroups, (error, results) => {
          console.log("results are " + JSON.stringify(results));
          resolve(dispatch({
            type: "GET_DEVICES",
            devices: results
          });
        });
      });
    }).catch((err) => {
      dispatch({
        type: "GET_DEVICES_ERROR",
        error: err
      });
      alert("Oh shoot we have an error " + err);
      return(err);
    });
  }
};

---

无论哪种方式，回调中的代码都不会执行。

嘿，您的代码有问题

const modGroups = async function(device) {
  async.map(device.groups, deleteExcessInfo, function(err, res) {
    device.groups = res;
  });
  return device;
}

调用上述函数会立即启动异步的

async.map

，然后返回未更改的

device

变量。因此，它有效地给出了与以下相同的结果：

const modGroups = async function(device) {
  return device;
}

要解决它，你可以用承诺来包装它：

const modGroups = async function(device) {
  return new Promise((resolve, reject) => {
    async.map(device.groups, deleteExcessInfo, function(err, res) {
      if (err) {
        reject(err);
      } else {
        device.groups = res;
        resolve(device);
    });
  })
}

---

我不确定您映射到机架上的async是什么，例如

async.map（设备、ModGroup，（错误、结果）=>{…

？加上你的

.map

参数已关闭。请看这里@Moonjsit我正在使用节点异步库：你是对的。我第一眼就误解了这个问题。感谢你的回答Moonjsit！不幸的是，我在实现承诺代码后仍然遇到同样的问题。我还为redux操作添加了承诺（问题已用此代码更新），但这也不起作用。async.map回调函数中的代码仍然没有被删除。