页面恢复时如何将我的数据保留在 react 组件中

如何解决页面恢复时如何将我的数据保留在 react 组件中

我正在尝试将我的文件存储在 IPFS 中并获取哈希值并将它们存储在智能合约中。我想在页面重新加载时保留我的哈希值。但是在下面的代码中，一旦页面重新加载，我上传的证书文件就会消失。我怎样才能做到。因为我是开发新手，所以我不知道。请提出一些想法。我将在下面附上我的 App.js 代码。

import React,{ Component } from 'react';
import web3 from './web3';
import ipfs from './ipfs';
import storehash from './storehash';
import { Button } from 'reactstrap';
import "./App.css";


class App extends Component {
  state = {      
    ipfsHash:null,buffer:'',ethAddress:'',transactionHash:'',txReceipt: ''    
  };


  //Take file input from user
  captureFile =(event) => {event.stopPropagation() 
    event.preventDefault() 
    const file = event.target.files[0] 
    let reader = new window.FileReader() 
    reader.readAsArrayBuffer(file) 
    reader.onloadend = () => this.convertToBuffer(reader) };


  //Convert the file to buffer to store on IPFS 
    convertToBuffer = async(reader) => {

  //file is converted to a buffer for upload to IPFS        
    const buffer = await Buffer.from(reader.result);   

  //set this buffer-using es6 Syntax        
    this.setState({buffer});};

  //ES6 async 
    functiononClick = async () => {try{this.setState({blockNumber:"waiting.."});        
    this.setState({gasUsed:"waiting..."});
    await web3.eth.getTransactionReceipt(this.state.transactionHash,(err,txReceipt)=>{          
      console.log(err,txReceipt);          
      this.setState({txReceipt});        
    });      
  }

  catch(error){      
    console.log(error);   
   }}


   onSubmit = async (event) => {      
     event.preventDefault();

     //bring in user's Metamask account address      
     const accounts = await web3.eth.getAccounts();   

     //obtain contract address from storehash.js      
     const ethAddress= await storehash.options.address;      
     this.setState({ethAddress});    

     //save document to IPFS,return its hash#,and set hash# to state      
     await ipfs.add(this.state.buffer,ipfsHash) => {        
       console.log(err,ipfsHash);        

       //setState by setting ipfsHash to ipfsHash[0].hash        
       this.setState({ ipfsHash:ipfsHash[0].hash });       
       
       
       // call Ethereum contract method "sendHash" and .send IPFS hash to etheruem contract       
      //return the transaction hash from the ethereum contract        
      storehash.methods.sendhash1(this.state.ipfsHash).send({          
        from: accounts[0]        
      },(error,transactionHash) => {          
        console.log(transactionHash);          
        this.setState({transactionHash});        
      });  

      storehash.methods.sendhash2(this.state.ipfsHash).send({          
        from: accounts[0]        
      },transactionHash) => {          
        console.log(transactionHash);          
        this.setState({transactionHash});        
      });  

      storehash.methods.sendhash3(this.state.ipfsHash).send({          
        from: accounts[0]        
      },transactionHash) => {          
        console.log(transactionHash);          
        this.setState({transactionHash});        
      });  

      storehash.methods.sendhash4(this.state.ipfsHash).send({          
        from: accounts[0]        
      },transactionHash) => {          
        console.log(transactionHash);          
        this.setState({transactionHash});        
      });  

      

    })    
  };


  render() {
    return (        
    <div className="App">          
    <header className="App-header">  
    <h1>EduDecentro</h1>          
    </header>

    <hr/>
    <grid>          
      <h5> Choose Transcript file  </h5>          
      <form onSubmit={this.onSubmit}>            
      <input              
      type = "file"              
      onChange = {this.captureFile}            
      />             
      <Button             
      bsstyle="primary"             
      type="submit">             
      Send it             
      </Button> 
      </form>
      <tbody>                 
         <tr>                   
           <td>IPFS Hash</td>                   
            <td> : </td>                    
            <td>{this.state.ipfsHash}</td>                  
            </tr>
      </tbody>
      

      <h5> Choose Certificate-1 file  </h5>          
      <form onSubmit={this.onSubmit}>            
      <input              
      type = "file"              
      onChange = {this.captureFile}            
      />             
      <Button             
      bsstyle="primary"             
      type="submit">             
      Send it             
      </Button> 
      </form>
      <tbody>                 
         <tr>                   
           <td>IPFS Hash</td>                   
            <td> : </td>                    
            <td>{this.state.ipfshash2}</td>                  
            </tr>
      </tbody>

      <h5> Choose Certificate-2 file  </h5>          
      <form onSubmit={this.onSubmit}>            
      <input              
      type = "file"              
      onChange = {this.captureFile}            
      />             
      <Button             
      bsstyle="primary"             
      type="submit">             
      Send it             
      </Button> 
      </form>
      <tbody>                 
         <tr>                   
           <td>IPFS Hash</td>                   
            <td> : </td>                    
            <td>{this.state.ipfshash3ash3}</td>                  
            </tr>
      </tbody>

      <h5> Choose Resume file  </h5>          
      <form onSubmit={this.onSubmit}>            
      <input              
      type = "file"              
      onChange = {this.captureFile}            
      />             
      <Button             
      bsstyle="primary"             
      type="submit">             
      Send it             
      </Button> 
      </form>
      <tbody>                 
         <tr>                   
           <td>IPFS Hash</td>                   
            <td> : </td>                    
            <td>{this.state.ipfshash4}</td>                  
            </tr>
      </tbody>


       
      <hr/> 
      <Button             
      bsstyle="primary"             
      type="submit">             
      logoUT            
      </Button>
      </grid>     
    </div>      
   );    
}}

 export default App;

解决方法

2 种可能的方式，

1. 将 redux 与您的项目集成，并使用 redux persist 来保持数据在刷新时可用。

2. 尝试将您的数据缓存在会话存储中，它在刷新时保持不变，并在选项卡关闭时消失。您也可以考虑本地存储。

您可以阅读 this 篇文章。