Reactjs 如何等待传奇完成调用api以执行下一个函数？

我有一个关于传奇的问题

我有一个按钮，单击该按钮时，会触发调用操作的函数：

Component.js

  onClickChainIdentifier = (event) => {
     //action called
      this.props.getChains();

     //next function to be called
      this.teste();
    }
  }

export function* getAllChains() {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
  } catch (err) {
    yield put(getChainsError(err));
  }
}


export default function* sagasApp() {

yield [
    fork( takeLatest, GET_CHAINS, getAllChains ),
  ]
}

Action.js

  onClickChainIdentifier = (event) => {
     //action called
      this.props.getChains();

     //next function to be called
      this.teste();
    }
  }

export function* getAllChains() {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
  } catch (err) {
    yield put(getChainsError(err));
  }
}


export default function* sagasApp() {

yield [
    fork( takeLatest, GET_CHAINS, getAllChains ),
  ]
}

当调度此操作时，它将触发一个常量GET_CHAINS，这将调用一个传奇：

Saga.js

  onClickChainIdentifier = (event) => {
     //action called
      this.props.getChains();

     //next function to be called
      this.teste();
    }
  }

export function* getAllChains() {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
  } catch (err) {
    yield put(getChainsError(err));
  }
}


export default function* sagasApp() {

yield [
    fork( takeLatest, GET_CHAINS, getAllChains ),
  ]
}

我希望在api返回（成功或错误）后，我可以调用组件内部的this.teste函数。 我该如何做到这一点

---

提前感谢您的帮助。

您可以使用标志来控制组件的渲染时间和渲染时间。这是一种常见的解决方案，用于呈现回退UI（例如：微调器或文本），以等待异步进程（saga、thunk、API服务等）完成，并且组件具有呈现自身所需的所有功能

---

查看我发布的解决方案，您可以访问该解决方案，其中显示了如何使用标志来解决问题。

您可以使用标志来控制组件何时以及是否应渲染。这是一种常见的解决方案，用于呈现回退UI（例如：微调器或文本），以等待异步进程（saga、thunk、API服务等）完成，并且组件具有呈现自身所需的所有功能

---

检查我发布的解决方案，您可以访问该解决方案，它显示了如何使用标志来解决问题。

您可以将回调传递给

getAllChains

函数：

onClickChainIdentifier = (event) => {
   this.props.getChains(() => {
      this.teste();
   });
}


export function* getAllChains(callback) {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
    if (callback) { 
      callback(); 
    }
  } catch (err) {
    yield put(getChainsError(err));
  }
}

---

您可以将回调传递给

getAllChains

函数：

onClickChainIdentifier = (event) => {
   this.props.getChains(() => {
      this.teste();
   });
}


export function* getAllChains(callback) {
  const requestURL = process.env.PATH_API.GET_CHAINS;

  try {
    const response = yield call(requestGet, requestURL);
    yield put(getChainsSuccess(response));
    if (callback) { 
      callback(); 
    }
  } catch (err) {
    yield put(getChainsError(err));
  }
}

---

正如jank指出的，您可以在中测试组件的状态，并在某些条件为真时调用函数。例如，利用jank的例子：

componentDidUpdate (prevProps) {
  if (this.props.pending && !prevProps.pending) {
    this.props.test()
  }
}

---

每次

pending

属性从

false

更改为

true

时，将调用

test

。

test

函数可能有一些副作用，如从服务器获取或使用某些浏览器API。使用更新的Hooks API可以实现相同的功能。

正如jank指出的，您可以在中测试组件的状态，并在某些条件为真时调用函数。例如，利用jank的例子：

componentDidUpdate (prevProps) {
  if (this.props.pending && !prevProps.pending) {
    this.props.test()
  }
}

---

每次

pending

属性从

false

更改为

true

时，将调用

test

。

test

函数可能有一些副作用，如从服务器获取或使用某些浏览器API。使用更新的Hooks API也可以实现相同的功能。

不熟悉Saga，但返回类型承诺吗？你不能使用

。那么
this.props.getChains（）。然后（this.teste（））
No，因为这不会返回承诺。未捕获类型错误：无法读取undefinedis
teste
async的属性“then”？不熟悉Saga，但返回类型是否承诺？你不能使用
。那么
this.props.getChains（）。然后（this.teste（））
No，因为这不会返回承诺。未捕获类型错误：无法读取undefinedis
teste
async的属性“then”？非常好，Dario！在您的答案中，我要添加的唯一一件事是将“callback”参数添加到action中<代码>导出函数getChains（callback）{return{type:GET_CHAINS，callback}}
非常好，Dario！在您的答案中，我要添加的唯一一件事是将“callback”参数添加到action中<代码>导出函数getChains（callback）{return{type:GET_CHAINS，callback}}
谢谢你的回答，但是我需要在saga完成后调用一个函数来执行。为了清楚起见，如果你打算在你的应用程序中使用redux，你应该注意保持你的函数的纯净。否则，随着应用程序的增长，您将出现难以调试的意外行为和副作用。谢谢您的回答，但我需要在saga完成后调用一个函数来执行。为了清楚起见，如果您计划在应用程序中使用redux，您应该注意保持函数的纯净。否则，随着应用程序的增长，您将出现难以调试的意外行为和副作用。