javascript - react : store uploaded array into global variable?

Question

我目前正在使用 React 上传 CSV 文件并将数据转换为数组，以便我可以访问电话号码。实际上，我已经让它几乎完全发挥作用，只有一个问题:我无法弄清楚如何在全局级别上将数组正确存储在变量(dataDump)中。它将它存储在另一个数组中。

Here's a picture of my console so you can see what I mean.

如果我使用dataDump[0](如handleClick 函数中所示)，我可以访问dataDump 的内容，但这不适用于全局变量。我需要能够将数组的值发送到其他组件/文件，所以我认为必须这样调用它才行。很可能我脑子里把这个问题过于复杂化了，答案非常简单，但我花了 2-3 周的时间从头开始学习 React、Twilio、Mongodb 等，所以我的大脑不配合。

我将不胜感激任何帮助!谢谢!代码如下。 (请注意，这是导入到应用程序页面的组件。)

import React from "react";
import CSVReader from "react-csv-reader";

var dataDump = [];

console.log(dataDump);


const papaparseOptions = {
  header: true,
  dynamicTyping: true,
  skipEmptyLines: true,
  transformHeader: header => header.toLowerCase().replace(/\W/g, "_"),
  complete: function(results) {
    dataDump.push(results.data);
    console.log(dataDump);
    var rows = results.data;
    let numbers = rows.map(a => a.phone_number); //make the results ONLY the phone numbers
    // console.log(numbers);

    document.getElementById("data2").innerHTML=numbers; //display the phone numbers

       }
     };

class Import extends React.Component {
    constructor(props) {
      super(props);
      this.state = {data:[]};
      this.handleClick = this.handleClick.bind(this);
  }

    handleForce = data => {
        // console.log(data.length);
        console.log(data);
        this.setState({data: data});

    };


    handleClick = () => {
        console.log("success");
        console.log(this.state.data);
        console.log("Next is Numbies:");
        let numbies = dataDump[0].map(a => a.phone_number);
        console.log(numbies);
      document.getElementById("data").innerHTML=numbies;

    }

  render() {
    return (
    <div className="container">
    <CSVReader
      className="csv-input"
      label="Select CSV file to import"
      onFileLoaded={this.handleForce}
      parserOptions={papaparseOptions}

    />
    <div>

    </div>
    <button onClick={this.handleClick.bind(this)}>
        Test
      </button>
      <div id="data" />
      <div id="data2" />
      <div id="data3">
      </div>
    </div>


    );
  }
}

export default Import;
// export default DataController;

Answer 1

React-Redux 现在正在使用上下文和钩子(Hook)，所以在你已经不再需要更简单的 React API 之前，或者至少你已经解决了你的问题之前，不必费心去实现 Redux 堆栈。人们开玩笑说 Redux 就像用火箭筒射苍蝇一样。 More info on React-Redux internals here和 here's the documentation for React's Context .

一些伪代码可以让您走上正确的道路:

// context.js
import { createContext } from 'react';
export const Store = createContext();

// app.js
import React from 'react';
import { Store } from './context';
import Import from './import'; // I wouldn't change the casing on or reuse a reserved keyword personally, maybe calling this something like 'CsvImporter' would be an improvement 

function App() {
  const [dataDump, setDataDump] = React.useState([]);
  return (
    <Store.Provider value={{ dataDump, setDataDump }}>
      <Import dataDump={dataDump} setDataDump={setDataDump} />
    </Store.Provider>
   );
}

<小时/>

现在您的导入组件有两个新的 props:dataDump 和 setDataDump。您可以像调用任何其他设置状态一样调用 setDataDump。不错!

那么您需要在新组件中使用 dataDump 吗？这很简单，柠檬汁，而且不需要全局变量或将模块作用域抛到一边:

// foobar.js
import React from 'react';
import { Store } from './context';

export function Foobar() {
  // you probably want to do more than force render an array as a string, but this is just a proof of concept
  return (
    <Store.Consumer>
      {({ dataDump, setDataDump }) => (
        <p>
          `${dataDump}`
        </p>
      )}
    </Store.Consumer>
  );
}

<小时/>

只需确保 Foobar 或其他组件在 app.js 中呈现为 Provider 的子级，现在您就有了一个用于传递 dataDump 的“全局”上下文。