Question

编辑：现在尝试使用papaparse块和 custom webworker多线程。 Edit2：抱歉，我无法弄清楚，但无论如何我还是决定通过https://www.freemaptools.com/find-cities-and-towns-inside-radius.htm上的网络抓取器呈现此城市列表，而不是通过使用papaparse的csv来呈现...

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

转到src> UIConainers> Map> CitiesMap.js

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

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

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>

我不建议阅读this question，我要求该papaparse应用程序user_domino解决了一些问题，但是此问题的工作方式有所不同，但仅适用于只有350字节的小文件

Answer 1

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

另一个想法是在Papa上设置chunkSize。像这样：

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，请做出反应

1 个答案: