未处理的拒绝（TypeError）：无法读取未定义的属性（读取“哈希”）答案

【问题标题】：Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'hash')未处理的拒绝（TypeError）：无法读取未定义的属性（读取“哈希”）
【发布时间】：2022-06-19 17:53:39
【问题描述】：

我正在尝试将文件存储在 IPFS 中，然后将哈希放在区块链上。但是当我尝试将文件上传到 IPFS 时，出现错误消息

Unhandled Rejection (TypeError): Cannot read properties of undefined (reading 'hash')

我正在使用 react 、 ganache 、 node.js 、 ipfs-http-client 这是我的 app.js 代码

import React, {Component} from 'react'
import SimpleStorageContract from '../src/SimpleStorage.json'
import getWeb3 from './utils/getWeb3'
import './css/oswald.css'
import './css/open-sans.css'
import './css/pure-min.css'
import './App.css'
const ipfsAPI = require('ipfs-http-client');
const ipfs = ipfsAPI.create({host: 'localhost', port: '5001', protocol: 'http'});
const contract = require('truffle-contract')
const simpleStorage = contract(SimpleStorageContract)
let account;
// Declaring this for later so we can chain functions on SimpleStorage.
let contractInstance;
let saveImageOnIpfs = (reader) => {
  return new Promise(function(resolve, reject) {
    const buffer = Buffer.from(reader.result);
    ipfs.add(buffer).then((response) => {
      console.log(response)
      resolve(response[0].hash);
    }).catch((err) => {
      console.error(err)
      reject(err);
    })
  })
}


class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      blockChainHash: null,
      web3: null,
      address: null,
      imgHash: null,
      isWriteSuccess: false
    }
  }
  componentWillMount() {
    ipfs.swarm.peers(function(err, res) {
      if (err) {
        console.error(err);
      } else {
        // var numPeers = res.Peers === null ? 0 : res.Peers.length;
        // console.log("IPFS - connected to " + numPeers + " peers");
        console.log(res);
      }
    });
    getWeb3.then(results => {
      this.setState({web3: results.web3})
      // Instantiate contract once web3 provided.
      this.instantiateContract()
    }).catch(() => {
      console.log('Error finding web3.')
    })
  }
  instantiateContract = () => {
    simpleStorage.setProvider(this.state.web3.currentProvider);
    this.state.web3.eth.getAccounts((error, accounts) => {
      account = accounts[0];
      simpleStorage.at('0xe7D98C99d71438A072B020138dD75347792FA214').then((contract) => {
        console.log(contract.address);
        contractInstance = contract;
        this.setState({address: contractInstance.address});
        return;
      });
    })
  }
  render() {
    return (<div className="App">
      {
        this.state.address
          ? <h1>CONNECT THE CONTRACT ADDRESS：{this.state.address}</h1>
          : <div/>
      }
      <h2>UPLOAD TO IPFS：</h2>
      <div>
        <label id="file">CLICK TO UPLOAD THE FILE</label>
        <input type="file" ref="file" id="file" name="file" multiple="multiple"/>
      </div>
      <div>
        <button onClick={() => {
            var file = this.refs.file.files[0];
            var reader = new FileReader();
            // reader.readAsDataURL(file);
            reader.readAsArrayBuffer(file)
            reader.onloadend = function(e) {
              console.log(reader);
              saveImageOnIpfs(reader).then((hash) => {
                console.log(hash);
                this.setState({imgHash: hash})
              });
            }.bind(this);
          }}>UPLOAD TO IPFS AND RETURN THE HASH</button>
      </div>
      {
        this.state.imgHash
          ? <div>
              <h2>imgHash：{this.state.imgHash}</h2>
              <button onClick={() => {
                  contractInstance.set(this.state.imgHash, {from: account}).then(() => {
                    console.log('HASH HAS BEEN WRITE ON BLOCKCHAIN');
                    this.setState({isWriteSuccess: true});
                  })
                }}>PUT HASH ON BLOCKCHAIN：contractInstance.set(imgHash)</button>
            </div>
          : <div/>
      }
      {
        this.state.isWriteSuccess
          ? <div>
              <h1>HASH IS ON THE BLOCK CHAIN</h1>
              <button onClick={() => {
                  contractInstance.get({from: account}).then((data) => {
                    console.log(data);
                    this.setState({blockChainHash: data});
                  })
                }}>READ HASH ON BLOCKCHAIN：contractInstance.get()</button>
            </div>
          : <div/>
      }
      {
        this.state.blockChainHash
          ? <div>
              <h3>READ THE HASH ON BLOCKCHAIN：{this.state.blockChainHash}</h3>
            </div>
          : <div/>
      }
      {
        this.state.blockChainHash
          ? <div>
              <h2>BROWSER ACCESS：{"http://localhost:8080/ipfs/" + this.state.imgHash}</h2>
              <img alt="" style={{
                  width: 1600
                }} src={"http://localhost:8080/ipfs/" + this.state.imgHash}/>
            </div>
          : <img alt=""/>
      }
    </div>);
  }
}
export default App

希望有人能成为我的救星，非常感谢。

【问题讨论】：

response[0] 未定义...
@Codenewbie 我不确定我是否做得对，我在 this.state 中添加了一个响应，但它仍然不起作用

标签： javascript reactjs ipfs js-ipfs ipfs-http-client

【解决方案1】：

您似乎假设总是会定义响应。请检查response[0] 以查看响应是否有效。看起来onloadend 是异步调用的。尝试onload 以确保您同步传递信息。

let saveImageOnIpfs = (reader) => {
  return new Promise(function(resolve, reject) {
    const buffer = Buffer.from(reader.result);
    ipfs.add(buffer).then((response) => {
      console.log(response)
      if(response[0] !== undefined && response[0].hash !== undefined){
           resolve(response[0].hash);
      }else{
           console.log(response)
      }
    }).catch((err) => {
      console.error(err)
      reject(err);
    })
  })
}

【讨论】：

【解决方案2】：

我的答案终于解决了

let saveImageOnIpfs= (reader) => {
  return new Promise(async(resolve, reject) => {
      try {
        const buffer = Buffer.from(reader.result);
          let results = await ipfs.add(buffer);
          let hash1 = results.path;
          resolve(hash1);
      } catch (err) {
          console.error(err);
          reject(err);
      }
  })
}

感谢您的回答对我的帮助。

【讨论】：