reactjs - 在 JavaScript 中可视化模式匹配

问题描述

我有一个简单的模式匹配函数，我试图减慢每个比较的执行速度，以便为它创建一个可视化器。但是，我希望能够在函数之外访问我的 i 和 j 变量。我试图通过在函数之外声明它们、将它们传入并在每次匹配后返回它们来做到这一点。这样我可以按一个按钮来控制执行流程。但是，它们没有被正确返回，我怀疑这与我使用 async/await 以及需要将值作为 Promise 返回有关。

https://codesandbox.io/s/staging-http-0zm04?file=/src/App.tsx:0-1072

import React, { useState } from "react";
import "./styles.css";


const delay = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

export const naive = async (text: string, pattern: string, i: number, j: number) => {
    const matches = [];
    let n = text.length;
    let m = pattern.length;
    while (i < n){
        while (j < pattern.length && pattern[j] === text[i + j]){
            j += 1;
            await delay(500);
        }
        if (j === m){
            matches.push(i)
        }
        return [i, j, matches]
    }
}

export default function App() {

    const [text, setText] = useState<string>("abcdefghijklmnopqrstuvwxyzabcd")
    const [pat, setPat] = useState<string>("abc")
    const [i, updateI] = useState(0);
    const [j, updateJ] = useState(0);

    const nextMatch = () => {
      let results = naive(text, pat, i, j);
      updateI(results[0]);
      updateJ(results[1]);
  }

  return (
    <div>
    <button style = {{width: "100px", height: "50px"}}onClick = {() => nextMatch()}/>
      {i}
      {j}
    </div>
  );
}

标签： reactjstypescript

由于 navie 是一个异步函数，因此您必须添加。这将有助于返回正确的 i 和 j 值

const nextMatch = () => {
  naive(text, pat, i, j).then((results) => {
    updateI(results[0]);
    updateJ(results[1]);
  });
};

reactjs - 在 JavaScript 中可视化模式匹配

问题描述

解决方案

推荐阅读