从生产中不起作用的字符串中提取数字

Question

我在从 React 中的字符串中提取数字时遇到问题。我使用的解决方案在本地机器上运行良好，但在投入生产时无法按要求运行。我尝试了 netlify 和 heroku 但得到了相同的结果。

我从一个文本文件中获取数据，该文件包含每个标题的内容列表和更多详细信息。 Link 到文本文件在这里：Link to text file from where I am fetching the data

例如：

游戏概念 100. 一般 101. 魔法黄金法则
卡片部分 200.一般 201.姓名
卡片类型300.一般301.神器

因此，我将主要标题分开，即 1. 游戏概念，2. 卡牌的组成部分，3. 卡牌类型和副标题，即 100. 通用，101. 魔法黄金法则，200. 通用，201。名称，300。一般，301。工件等...来自该文本文件。

正如我之前提到的，我尝试的方法在本地机器上运行良好，但一旦我将代码推送到生产环境，我就会得到之前的列表 + 分离的新列表。我也试过这个：

parseFloat([heading]) + "." < 5 , parseFloat([heading]) < 5

...但没有得到想要的结果。

我不知道该怎么做，如果能在这个问题上得到一些帮助，我将不胜感激。

下面是App.js:

import { useState, useEffect } from "react";
import url from "./MagicRules.txt";
import "./App.css";

function App() {
  let tempdata = [];
  let dataSplit = [];
  let headings = [];

  const [newdata, setNewData] = useState([]);
  useEffect(() => {
    temp();
    // eslint-disable-next-line
  }, [0]);
  const temp = async () => {
    tempdata = await (await fetch(url, { mode: "no-cors" })).text();
    dataSplit = tempdata
      .split(/^\s+|\s+$/gm)
      .filter((element) => isNaN(element));
    dataSplit = dataSplit.slice(0, dataSplit.lastIndexOf("Glossary"));
    headings = dataSplit.filter((heading) => parseInt([heading]) + "." < 5);
    let newHeadings = [...new Set(headings)];
    setNewData(newHeadings);
  };
  return (
    <div className="App">
      {newdata.map((heading, index) => (
        <ul key={index}>{heading}</ul>
      ))}
    </div>
  );
}

export default App;

Answer 1

感谢大家的帮助和建议。如第一张图片所示，这些索引上有一个换行符 ('\n')。我通过在代码中使用 console.log(headings) 并将其部署到 Netlify/Heroku 并在访问 link 之后发现了这一点，我在浏览器的控制台中发现了这一点。

问题出在拆分函数中使用的正则表达式中。我对 's+' 做了一个小改动，将 's*' 解决了这个问题。即 split(/^\s+|\s*$/gm) 而不是 split(/^\s+|\s+$/gm).

希望这对其他人有所帮助。

从生产中不起作用的字符串中提取数字

Extracting numbers from a string not working in production

javascript

reactjs

filter

split

netlify