reactjs - 未处理的拒绝（TypeError）：BlocContract.methods.read_task 不是函数

Question

我正在学习如何成为一名区块链开发人员，目前正在尝试使用 truffle 部署一个以太坊待办事项列表。但是，我在标题中遇到错误，并且不知道我做错了什么。作为参考，我使用的是 web3 版本 1.4.0，并在下面附上了我的代码。

Solidity 合约代码

//Bloc.sol
pragma solidity >=0.4.22 <0.9.0;
contract Bloc {

struct Task {
    bool status;
    string task;
}

//msg.sender gives us the address of the user

mapping (address => Task[]) public todo_list;

Task[] public todo_arr;

function read_task(uint user_index) public view returns (string memory) {
    return todo_list[msg.sender][user_index].task;
}

function add_task(string memory task) public { //external functions are cheaper than public functions
    //Add a task to msg.sender
    //First initialize a task
    Task memory new_task = Task(false, task);
    todo_list[msg.sender].push(new_task);
}

function update_task(uint idx, bool new_status) public {
    todo_list[msg.sender][idx].status = new_status;
}

//T_item init_item = T_item(false);
function delete_task(uint idx) public {
    delete todo_list[msg.sender][idx];
}

function get_task_count() public view returns (uint) {
    return todo_list[msg.sender].length;
}
}

以及用于反应的 App.js 文件

//App.js
import React, { useState, handleSet } from "react";
import React, { useState } from "react";
import Web3 from "web3";
//import { simpleStorageAbi } from "./abi/abis";
import { Bloc } from "./abis/Bloc";
//import { abi } from "./abis/test";
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
const web3 = new Web3(Web3.givenProvider);

const contractAddr = "0x2891297aA45AFe375cE5dCDc87380d37BcE8eCC6";
const BlocContract = new web3.eth.Contract(Bloc, contractAddr);

const handle_read = async (e) => {
  e.preventDefault();
  const result = await BlocContract.methods.read_task(7).call();
  console.log(result);
};

function App() {
  const [number, setNumber] = useState(0);
  return (
    <div
      className="App container"
      style={{ height: "100vh", display: "flex", alignItems: "center" }}
    >
      <div className="container" style={{ margin: "auto" }}>
        <div className="container read-task" style={{ padding: "20px" }}>
          <button type="button" class="btn btn-primary" onClick={handle_read}>
            Read Task
          </button>
        </div>
        <div className="set-task" style={{ padding: "20px" }}>
          <form>
            <label>
              Set Task
              <br />
              <input type="text" name="name"></input>
            </label>
          </form>
        </div>
        <div className="set-task" style={{ padding: "20px" }}>
          <form>
            <label>
              Update Task
              <br />
              <input type="text" name="name"></input>
            </label>
          </form>
        </div>
        <div className="container set-idx" style={{ padding: "20px" }}>
          <label>Task Index</label>
          <div className="row">
            <div className="col-sm">
              <button
                onClick={(e) =>
                  number > 0 ? setNumber(number - 1) : setNumber(0)
                }
              >
                -
              </button>
            </div>
            <div className="col">
              <input type="text" name="name" value={number}></input>
            </div>
            <div className="col-sm">
              <button onClick={(e) => setNumber(number + 1)}>+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

标签： reactjsethereumsoliditytruffle