在React Native应用中根据用户请求中断while循环

Question

在一个React Native应用程序中，我希望能够从do while循环中退出，当用户单击按钮时，向上下文发送一个停止“信号”以更改状态，但是在循环中条件改变了没有退出循环。 我检查了运行功能并使用useEffect进行了测试，并且它正在更改。 我尝试了以下方法：

我的背景：

import React from 'react';
import { getTodoApi } from './api';

const TodoContext = React.createContext();

function TodoProvider({ children }) {
  const [contextState, setContextState] = React.useState({
    stopped: false,
    currentTodoTitle: '',
  });

  function stop() {
    setContextState({ ...contextState, stopped: true });
  }

  function changeTodoTitle(newTodoTitle) {
    setContextState({ ...contextState, currentTodoTitle: newTodoTitle });
  }

  async function wait(ms) {
    return new Promise(resolve => {
      setTimeout(resolve, ms);
    });
  }

  async function getTodo() {
    try {
      let todoNum = 1;
      let fetchedTodo = '';
      do {
        console.log('Starting a new loop');
        if (contextState.stopped) { //<---------------------------------------
          console.log('Stopped by the user!!!');
          //break;
          throw new Error('Stopped by the user!');
        }
        fetchedTodo = await getTodoApi(todoNum);
        console.log('Fetched todo', fetchedTodo);
        changeTodoTitle(fetchedTodo.title);
        await wait(2000);
        todoNum++;
      } while (todoNum < 20);
      console.log('After while..');
      return true;
    } catch (err) {
      console.log('IN CATCH ERROR:', err);
      return false;
    }
  }

  return (
    <TodoContext.Provider
      value={{
        stop,
        getTodo,
        todoToDisplay: contextState.currentTodoTitle,
      }}>
      {children}
    </TodoContext.Provider>
  );
}

function useTodo() {
  const context = React.useContext(TodoContext);
  if (context === undefined) {
    throw new Error(`useTodo must be used within a TodoProvider`);
  }
  return context;
}

export { TodoProvider, useTodo };

组件：

export default function Todos() {
  const { stop, getTodo, todoToDisplay } = useTodo();

  React.useEffect(() => {
    async function startGettingTodos() {
      await getTodo();
    }
    startGettingTodos();
  }, []);

  return (
      <View style={styles.container}>
        <ActivityIndicator animating size="large" />
        <Paragraph style={styles.paragraph}>{todoToDisplay}</Paragraph>
        <Button onPress={stop}>Stop</Button>
      </View>
    )
}

App.js：

export default function App() {
  return (
    <TodoProvider>
      <Todos />
    </TodoProvider>
  );

和API：

export const getTodoApi = async (todoNumber) => {
  console.log("In api getTodo..");
  console.log("Todo number", todoNumber)
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoNumber}`);
  if (response.ok) {
    console.log("Response ok");
    const data = await response.json();
    console.log("Data", data);
    return data;
  } else return null;
  } catch(error) {console.log("There was an error", error)}
};

这是带有代码的零食My Snack 。 任何提示/帮助表示赞赏。 谢谢。