Solidity 和 React：不能将 method.call() 用于合约中的视图函数

问题描述

我试图使用 React 作为前端和 solidity 作为后端来制作待办事项列表。我用 Truffle 和 Ganache 来测试它。我成功设置了私有区块链并从 Ganache 导入了多个帐户。但是，每当我在 React 应用程序中使用 method.call() 时，它都会引发以下错误：

index.js:298 Uncaught (in promise) Error: Returned values aren't valid,did it run Out of Gas? 
You might also see this error if you are not using the correct ABI for the contract you are retrieving data from,requesting data from a block number that does not exist,or querying a node which is not fully synced.
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParametersWith (index.js:298)
    at ABICoder.push../node_modules/web3-eth-abi/lib/index.js.ABICoder.decodeParameters (index.js:285)
    at Contract.push../node_modules/web3-eth-contract/lib/index.js.Contract._decodeMethodReturn (index.js:470)
    at Method.outputFormatter (index.js:760)
    at Method.push../node_modules/web3-core-method/lib/index.js.Method.formatOutput (index.js:147)
    at sendTxCallback (index.js:523)
    at cb (util.js:689)
    at Item.push../node_modules/process/browser.js.Item.run (browser.js:153)
    at drainQueue (browser.js:123)

我不知道我做错了什么。我检查了abi和合同地址，但它们似乎都是正确的。谁能告诉我是什么导致了错误以及我如何解决它？ 这是我的solidity和react代码：

solidity（合同）：

// SPDX-License-Identifier: MIT
pragma solidity >=0.6.0 <0.8.0;

pragma experimental ABIEncoderV2;

contract Todolist {
  string[][] lists;
  mapping (address => uint) public ownerToListId;
  mapping (address => bool) ownerHasList;

  function addToList(string calldata item) external{
    if (!ownerHasList[msg.sender]) {
      // newList = newList.push(item);
      lists.push([item]);
      ownerToListId[msg.sender] = lists.length - 1;
    } else {
      lists[ownerToListId[msg.sender]].push(item);
    }
  }

  function getList() external view returns(string[] memory) {
    return lists[ownerToListId[msg.sender]];
  }
}

反应（app.js）：

import React,{ useState } from "react";
import Web3 from "web3";
import { todolistAbi } from "./abi/abis";
import "./App.css";

const web3 = new Web3(Web3.givenProvider);
const contractAddr = "0x75e4f59aBA61e780Accf573Ce632C2f31B534056";
const TodolistContract = new web3.eth.Contract(todolistAbi,contractAddr);

function App() {
  const [list,setList] = useState(["placeholder"]);
  // const [getNumber,setGetNumber] = useState(0x00);
  const [itemToAdd,setItemToAdd] = useState("");
  const getList = async () => {
    const list = await TodolistContract.methods.getList().call();
    console.log(list);
    setList(list.map((item) => <li>{item}</li>));
  };

  const addToList = async () => {
    const accounts = await window.ethereum.enable();
    const account = accounts[0];
    const gas = await TodolistContract.methods
      .addToList(itemToAdd)
      .estimateGas();
    await TodolistContract.methods
      .addToList(itemToAdd)
      .send({ from: account,gas });
    console.log("a");

    await getList();
  };

  return (
    <div className='App'>
      <header className='App-header'>
        <div>
          <ul>{list}</ul>
        </div>
        <br />
        <input type='text' onChange={(e) => setItemToAdd(e.target.value)} />
        <button onClick={addToList} type='button'>
          get the list!
        </button>
      </header>
    </div>
  );
}

export default App;

truffle-config.js:

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",// Localhost (default: none)
      port: 7545,// Standard Ethereum port (default: none)
      network_id: "*",// Any network (default: none)
      from: "0xfbfaf75dea69c388f45d20d5aab7b947072d8416",gas: 18000000,},mocha: {
  },compilers: {
    solc: {
      version: "0.6.0",};

当我在 react 中调用 getList 函数时出现错误... "const list = await TodolistContract.methods.getList().call();"

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）