React v17升级后ipfs.files.add报is not a function错误问题求助

问题根因 #

本次依赖升级时ipfs-http-client包升级到了存在不兼容破坏性变更的版本，旧版本的ipfs.files.add接口、回调调用方式、返回值结构均已被移除或调整，所以触发了方法不存在的报错。

修复方案 #

提供两种可选修复方式，可根据项目需求选择：

方案1：适配新版本API（推荐） #

调整两处代码即可适配新版ipfs-http-client的接口规范：

1. 修改NewReview.js中的getHash方法，替换回调写法为async/await，调用ipfs.add替代旧的ipfs.files.add：

async function getHash() {
  try {
    const result = await ipfs.add(Buffer.from(buffer))
    // 新版返回结构中hash对应path字段
    setIpfsHash(result.path)
  } catch (error) {
    console.error(error)
  }
}

2. 如果调用时出现401权限错误，需要在ipfs.js的创建配置中补充Infura节点的授权信息（Infura现在已不再支持无授权调用公共IPFS节点）：

const { create } = require('ipfs-http-client');
const auth = 'Basic ' + Buffer.from('你的Infura项目ID:你的Infura项目密钥').toString('base64')
const ipfs = create({
  host: 'ipfs.infura.io', 
  port: 5001, 
  protocol: 'https',
  headers: { authorization: auth }
});

export default ipfs;

方案2：回退到兼容旧版本 #

如果不想调整业务代码，可以直接将ipfs-http-client固定到支持旧API的版本：
执行安装命令：
npm install ipfs-http-client@33.1.1
安装完成后删除项目的node_modules文件夹和package-lock.json文件，重新执行npm install即可恢复原有逻辑的运行。

验证步骤 #

修改完成后重启本地开发服务，清空浏览器缓存后测试图片上传功能即可。

内容的提问来源于stack exchange，提问作者A-PSquestions