Question

我正在尝试在代码中添加一个async/await，以使该应用程序等待函数执行以调用另一个函数，但是我似乎无法弄清楚我的代码在哪里是错的。

我在redux动作中有一个API调用，这是动作

export const editSecondaryCategory = (text) => {
  return (dispatch) => {
    let obj = {
      text
    };
    axios
      .put(
        `${ROOT_URL}/...`,
        obj
      )
      .then(() => {
        dispatch({ type: EDIT_NOTE, payload: [...annotations] });
        dispatch(loadAllAnnotations(cid, uuid));
      })
      .catch((error) =>
        dispatch(
          notifSend({
            message: error.message,
            kind: "danger",
            dismissAfter: 2000,
          })
        )
      );
  };
};

在组件中，我希望在此操作完成后等待以调用另一个函数来更新状态。理想情况下，应该是这样的（我猜是吗？）：

async updateCategory() {

    // do the thing I have to wait for
    const propsUpdate = await this.props.editSecondaryCategory(text);

    // if you've done the thing then call the function to update the state
    if (updatedCat) {
      this.updateStateArray();
    }

  }

在用户完成信息编辑后，我将在组件内调用this.updateCategory()。显然，此代码不起作用。我知道这是错误的，我只是不知道为什么。基本上，我不知道要在updateCategory()里面写什么来完成这项工作。

请帮助哈哈

Answer 1

您需要重写editSecondaryCategory函数以使其异步。

  export async function editSecondaryCategory(text){
  return (dispatch) => {
    let obj = {
      text
    };
    axios
      .put(
        `${ROOT_URL}/...`,
        obj
      )
      .then(() => {
        dispatch({ type: EDIT_NOTE, payload: [...annotations] });
        dispatch(loadAllAnnotations(cid, uuid));
      })
      .catch((error) =>
        dispatch(
          notifSend({
            message: error.message,
            kind: "danger",
            dismissAfter: 2000,
          })
        )
      );
  };
};

当前，您的函数不是异步函数，请进行上述更改并检查。

异步功能不等待等待结束

1 个答案: