单击预览后，如何在我的 React 应用程序上显示第二个和第三个按钮？

Posted 2023-02-22

【中文标题】单击预览后，如何在我的 React 应用程序上显示第二个和第三个按钮？

【英文标题】：How can I display a second and third button on my React App after the previews one has already been clicked?

【发布时间】：2019-10-24 11:38:01

【问题描述】：

我目前正在构建一个 CSV 文件加载器，它将数据解析为 JSON，它将具有三个不同的按钮，第一个是让我从计算机中选择文件并加载 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 的信息进行比较。

提前致谢！

【参考方案1】：

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