对我来说，帕帕帕斯的工作空间不超过1 MB，请做出反应 [英] Papaparse doesn't work for more than 1 MB for me, react

问题描述

尝试使用papaparse块&现在 custom webworker多线程. Edit2:抱歉，我无法弄清楚，但我将通过

Trying to use papaparse chunk & custom webworker multithreading now. Sorry I could not figure this out, but I am going to render this list of cities through a web scraper on https://www.freemaptools.com/find-cities-and-towns-inside-radius.htm anyway I decided instead of from a csv with papaparse...

我正在尝试在papaparse解析的Dropbox链接上从csv渲染每个城市的<WeatherCitySky />.在componentDidMount内部，第一个cors-anywhere/dropbox链接已注释掉是美国东部城市的1.5 MB CSV，无法正常工作.想要至少在美国所有城市使用5MB的内存，但是我能做的就是第二个corsanywhere/dropbox链接，大约350bytes

I am trying to render <WeatherCitySky /> for each city from a csv at a dropbox link parsed by papaparse. Inside componentDidMount the first cors-anywhere/dropbox link, commented out, is a 1.5 MB csv of eastern US cities... won't work. Wanted to do at least all of US cities at 5MB, but all I can get to work is the second corsanywhere/dropbox link at about 350bytes

转到src> UIConainers> Map> CitiesMap.js

Go to src>UIConainers>Map>CitiesMap.js

https://codesandbox.io/s/zen-dijkstra-1c31n ?fontsize = 14

通过下方的地球图标(如果在紫色屏幕上开始，请按收件箱图标)，然后是左上方的城市动画，找到CitiesMap.js

the CitiesMap.js is found by bottom globe icon (after pressing the inbox icon if you're starting on the purple screen), then top left city animation

class CitiesMap extends React.Component {
  _isMounted = false;
  constructor(props) {
    super(props);
    this.updateData = this.updateData.bind(this);
    this.state = { cities: [] };
  }
  componentDidMount() {
    this._isMounted = true;
    Papa.parse(
      "https://dl.dropboxusercontent.com/s/k81s5enbamijuke/worldcitiespop_northamerica_nolonglat_few.csv",
      // this one doesn't work"https://dl.dropboxusercontent.com/s/wy9vjxczbjm796y/worldcities_usa_few.csv",
      {
        download: true,
        worker: true,
        header: true,
        skipEmptyLines: true,
        step: this.updateData,
        complete: function(results) {
        }
      }
    );
  }
  updateData(results) {
    if (this._isMounted) {
      this.setState(prevState => ({
        cities: [...prevState.cities, results.data.City]
      }));console.log(this.state.cities)
    }
  }
  componentWillUnmount() {
    this._isMounted = false;
  }


  render(props) {
    const filteredCities = this.state.cities.filter(cities => {
      return (
        cities.toUpperCase().indexOf(this.props.search.toUpperCase()) !==
        -1
      );
    });
    return (
      <div>
        <div className="Cities">
          {filteredCities.map(City => {
            return (
              <div>
                <WeatherCitySkyMap />
              </div>

我不建议您阅读这个问题. user_domino解决了一些问题，但是此问题的工作方式有所不同，但只能在只有350字节的小文件上显示

I wouldn't recommend reading this question I asked for this papaparse application that user_domino solved some problems, but this problem is different evidenced by it working, but only on a small file of only 350 bytes

推荐答案

尝试将step切换为chunk(它将一次处理一个块，而一次处理一个记录).您只需要更改该参数，并使函数和其他所有内容保持不变即可.

Try switching step to chunk (it will process a chunk at a time vs one record at a time). You should only need to change that parameter and leave the function and everything else the same.

另一个想法是在Papa上设置chunkSize.像这样:

Another idea is setting chunkSize on Papa. So something like:

Papa.parse([your_url],
  {
    download: true,
    worker: true,
    header: true,
    skipEmptyLines: true,
    chunk: this.updateData,
    chunkSize: 1024 * 1024 * 10, // 10MB
    complete: function(results) {
    }
  }
);

这篇关于对我来说，帕帕帕斯的工作空间不超过1 MB，请做出反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！