contract.set不是函数

Question

我正在学习以太坊的开发，我下载了react truffle套装，然后尝试更改一些代码，将字符串插入区块链，然后进行回声。但我有一个错误，上面写着：未处理的拒绝(TypeError(：contract.set不是的函数

App.js:

import React, { Component } from "react";
import SimpleStorageContract from "./contracts/SimpleStorage.json";
import getWeb3 from "./getWeb3";
import "./App.css";
class App extends Component {
state = { storageValue: "", web3: null, accounts: null, contract: null, newValue: "" };
componentDidMount = async () => {
try {
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
// Get network provider and web3 instance.
const web3 = await getWeb3();
// Use web3 to get the user's accounts.
const accounts = await web3.eth.getAccounts();
// Get the contract instance.
const networkId = await web3.eth.net.getId();
const deployedNetwork = SimpleStorageContract.networks[networkId];
const instance = new web3.eth.Contract(
SimpleStorageContract.abi,
deployedNetwork && deployedNetwork.address,
);
// Set web3, accounts, and contract to the state, and then proceed with an
// example of interacting with the contract's methods.
this.setState({ web3, accounts, contract: instance }, this.runExample);
} catch (error) {
// Catch any errors for any of the above operations.
alert(
`Failed to load web3, accounts, or contract. Check console for details.`,
);
console.error(error);
}
};
handleChange(event) {
this.setState({newValue: event.target.value });
}
async handleSubmit(event) {
event.preventDefault();
const { accounts, contract } = this.state;
await contract.set(this.state.newValue, {from: accounts[0]});
const response = await contract.get();
this.setState({storageValue: response });
}
runExample = async () => {
const { contract } = this.state;
// Get the value from the contract to prove it worked.
const response = await contract.methods.get().call();
// Update state with the result.
this.setState({ storageValue: response });
};
render() {
if (!this.state.web3) {
return <div>Loading Web3, accounts, and contract...</div>;
}
return (
<div className="App">
<h1>Sample</h1>
<div>Text: {this.state.storageValue}</div>
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.newValue} onChange={this.handleChange.bind(this)}></input>
<input type="submit" value="Submit"></input>
</form>
</div>
);
}
}
export default App;

以下是集合函数声明的契约：

SimpleStorage.sol:

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.21 <0.7.0;
contract SimpleStorage {
string storedData;
constructor(string memory x) public {
storedData = x;
}
function set(string memory x) public {
storedData = x;
}
function get() public view returns (string memory) {
return storedData;
}
}

Answer 1

代码中的这一行使用Truffle包的语法：

await contract.set(this.state.newValue, {from: accounts[0]});

但您的代码只导入web3js(而不是Truffle(，并且似乎在其他地方正确使用了它。

在web3js中，您需要使用contract对象的methods属性(与在contract.methods.get()中使用的属性相同(。以及send()函数(接受具有from属性的对象(来发送事务而不是调用。

所以应该是

await contract.methods.set(this.state.newValue).send({from: accounts[0]});

注意：Web3js和Truffle是两个独立的包，彼此无关。但两者都可以用于与智能合约进行交互