javascript - 单击预览按钮后，如何在我的 React App 上显示第二个和第三个按钮？

Question

我目前正在构建一个将数据解析为 JSON 的 CSV 文件加载器，它将具有三个不同的按钮，第一个是让我从我的计算机中选择一个文件并加载 CSV 数据以进行转换的按钮它到 JSON，之后我需要显示第二个按钮，允许我连接到 Shopify API，单击此按钮时，它将向 API 发出获取请求以获取 JSON 数据并将 ID 与文件匹配我上传了，在那之后它会存储所有匹配的 ID，这是必须显示第三个按钮的时候，这是最后一个需要向另一个 API 发出 POST 请求的按钮。我只需要知道按钮的功能，例如，如何显示一个按钮、存储数据并显示下一个按钮等等。

由于我是编码新手，我现在有点迷茫，我一直在考虑为此设置状态并隐藏按钮(第二个和第三个)，问题是我不知道如何在加载数据后显示按钮，而不仅仅是在单击按钮时显示。

我正在使用 react-file-reader NPM 模块将 CSV 渲染为 JSON。

`export default class csvLoader extends Component {
   constructor(props) {
   super(props);
 }
 handleFiles = files => {
   let reader = new FileReader();
   reader.onload = function(e) {
     // Use reader.result
     let csv = reader.result;
     let lines = csv.split("\n");
     let result = [];
     let headers = lines[0].split(",");
     for (let i = 1; i < lines.length; i++) {
       let obj = {};
       let currentLine = lines[i].split(",");
       for (let j = 0; j < headers.length; j++) {
      obj[headers[j]] = currentLine[j];
     }
     result.push(obj);
    }
  //return result; //JavaScript object
  result = JSON.stringify(result); //JSON
  console.log(result);
 };
 reader.readAsText(files[0]);
 };
 render() {
   return (
      <ReactFileReader handleFiles={this.handleFiles} fileTypes=".csv"}>
         <button className="btn btn-primary">Importar CSV</button>
      </ReactFileReader>
    );
  }
}`

没有错误消息，所有数据都显示在控制台中，Info 不必显示在控制台上，而是存储起来与其他 API 的信息进行比较。

提前致谢!

Answer 1

我认为最好的解决方案是为您的 api 调用创建一个操作，将您的数据传递给 redux，并确保您的组件正在监听存储中特定数据实体的更改，假设您使用的是 redux。如果不是，那么通过组件状态处理按钮的状态也是最佳的。