如何让我的 React 文件在继续之前休眠 5 秒？

Question

所以我想让我的函数在导航到另一个页面之前延迟读取行。我目前有一个微服务运行在一个无限循环中，它从一个文本文件中读取和写入。由于这个过程可能需要一段时间，我想至少等待 5 秒钟。这是我的代码：

import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import React from "react";
import axios from "axios";
import raw from '../command_file.txt';

function HomePage() {
    let navigate = useNavigate();
    let result;

    const [ingredientInput, setIngredientInput] = React.useState();

    const handleSubmit = async (e) => {
        e.preventDefault();
        const data = {ingredientInput};
        console.log(data.ingredientInput);
        console.log(JSON.stringify(data));
        const response = await fetch('http://localhost:5000/verify', {
            method: 'POST',

            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        });
        if (response.status === 201){
            console.log("Connected to microservice!");
        } else {
            console.log(`Error, status code = ${response.status}`)
        }
        console.log(JSON.stringify(response.json));
        fetch(raw)
            .then(r => r.text())
            .then(text => {
                console.log('text decoded:', text);
                console.log(text[7]);
                result = text[7];
                navigate("/result", result);
        });
    
    };

我想在 fetch 被调用之前暂停程序 5 到 10 秒，这样结果可以由一个变量填充，文件稍后可以在其中使用导航传递结果。不幸的是，我无法使 setTimeout 之类的东西正常工作。当程序现在运行时，结果最终作为未定义传递，变量文本 returns 来自文本文件的旧数据。我没有想法，有人能给我指出正确的方向吗？

Answer 1

我不太确定这对你的情况是否有帮助，但你可以使用这个很酷的手动 js 睡眠功能：

const sleep = ms => new Promise(r => setTimeout(r, ms));

然后在获取之前，您可以这样调用它：

await sleep(5000)

Answer 2

我不确定我是否理解您在此处构建的内容，但您似乎正在使用 public .txt 文件作为数据库，这确实不是一个好主意。理想情况下，您希望您的微服务直接写入数据库和 return 您的前端代码需要的任何内容。

在您的情况下，流程可能如下所示：

您将配料表发送到微服务
微服务执行所有必要的计算并将数据插入数据库（例如 SQLite 或 PostgreSQL）
微服务然后 return 直接重定向 URL

您的代码将如下所示：

fetch('http://localhost:5000/verify', { ...postHeaders }).then(
    res => res.json()).then(res => navigate(res["url"]))

编辑：如果您真的必须这样做，我会看看您导入 txt 文件的方式。您需要确保它位于 public 目录中（例如，可以由 nginx 提供）并且您实际上是从 public URL 中获取它，而不是在构建时导入它。但是，我仍然不确定他们为什么让你这样做，因为它真的没有多大意义。

如何让我的 React 文件在继续之前休眠 5 秒？

How do I make my React file sleep for 5 seconds before continuing?

javascript

reactjs