reactjs - 页面恢复时如何将数据保留在反应组件中
问题描述
我正在尝试将我的文件存储在 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, (err, 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]
},
(error, transactionHash) => {
console.log(transactionHash);
this.setState({transactionHash});
});
storehash.methods.sendhash3(this.state.ipfsHash).send({
from: accounts[0]
},
(error, transactionHash) => {
console.log(transactionHash);
this.setState({transactionHash});
});
storehash.methods.sendhash4(this.state.ipfsHash).send({
from: accounts[0]
},
(error, 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种可能的方式,
将redux与您的项目集成,并使用redux persis t 保持数据在刷新时可用。
尝试将数据缓存在会话存储中,刷新时保持不变,并随着选项卡的关闭而消失。您也可以考虑本地存储。
你可以阅读这篇文章。
推荐阅读
- ansible - Ansible nested loops through inventories
- c++ - 在 C++ 构造函数中使用随机字符串生成器
- python-3.x - 使用 scipy 的 welch 函数在 pycharm 中出现内存错误
- python - 如何使用 PyMongo 使用对象插入多个字典值
- javascript - 使用带有 jQuery 选择器的变量时出错
- r - Combine Categorical and Gradient Fill in Geospatial - R
- php - 在感染测试期间始终完成 phpunit-tests:失败后不调用拆卸方法
- android - ArcMotion 线性移动视图
- common-lisp - Common Lisp——是否可以定义“unlet”?
- javascript - 将带有var对象的javascript文件添加到角度6