Unsure how to resolve TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5__.default.files.add is not a function

Question

我的 React 项目出现了一个我以前没有遇到过的问题。我很确定问题是在我将 React 更新到 v17.0.0 以及许多其他库之后出现的。

基本上，我的一个页面有一个上传图像的输入，这使得文件成为一个数组缓冲区，以便上传到 IPFS。它曾经有效，但我最近再次测试了它（在进行了多次提到的 package/library 更新之后），现在它给了我错误 TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5__.default.files.add is not a function.

为了纠正这个错误，我尝试了 npm update 以确保所有内容都是最新的，但这没有用。

这是我得到的控制台错误：

getHash NewReview.js:18
NewReview NewReview.js:30
React 5
    invokePassiveEffectCreate
    callCallback
    invokeGuardedCallbackDev
    invokeGuardedCallback
    flushPassiveEffectsImpl
unstable_runWithPriority scheduler.development.js:468
React 3
    runWithPriority
    flushPassiveEffects
    commitBeforeMutationEffects
workLoop scheduler.development.js:417
flushWork scheduler.development.js:390
performWorkUntilDeadline scheduler.development.js:157

以下是我非常确定 NewReview.js 中与错误相关的部分：

import ipfs from "../utils/ipfs";

export default function NewReview() {

    const [ipfsHash, setIpfsHash] = useState("");
    const [buffer, setBuffer] = useState(null);

    function getHash() {
        ipfs.files.add(Buffer.from(buffer), (error, result) => {
            if (error) {
                console.error(error)
                return
            }
            setIpfsHash(result[0].hash);
    }});

    useEffect(() => {
        if (buffer) {
            getHash()
        }
    });

// ...

这是 ipfs.js 的样子：

const { create } = require('ipfs-http-client');
const ipfs = create({host: 'ipfs.infura.io', port: 5001, protocol: 'https'});

export default ipfs;

作为纠正此问题的另一种尝试，我尝试使用 ipfs.default.files.add，正如我在另一个 Stack Overflow post 上看到的建议的解决方案，但不幸的是，这没有用。同样，代码过去可以完美地工作，所以我不确定这个问题的原因是由于代码编写方式的错误。

感谢您的帮助！如果您需要我详细说明任何内容，请随时询问。

Answer 1

我自己设法解决了我的问题！这是出了什么问题。

TypeError实际上是我从ipfs-api切换到ipfs-http-client造成的。 ipfs.files.add 在 ipfs-http-client 中不是有效函数，这解释了为什么我得到 TypeError。我将线路切换到 ipfs.add 并且我能够让它工作。

我还想指出，我必须使用 ipfs.add 作为 async/await 函数的一部分才能使其正常工作，否则它似乎根本不会执行.弄清楚这是一个完全不同的问题，我也花了相当多的时间来完成。坦率地说，我认为没有必要将它作为 async/await 函数的一部分进行详细记录。

Unsure how to resolve TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5__.default.files.add is not a function

Unsure how to resolve TypeError: _utils_ipfs__WEBPACK_IMPORTED_MODULE_5__.default.files.add is not a function

javascript

reactjs

webpack

typeerror

ipfs