使用Truffle React box的Hook错误(将App.js从类组件转换为功能组件)

Question

不是solid/React的专业用户。我得到了Truffle React盒子，我正在制作一个网站。我的例子很简单。我有这个Nav元素:

import React from 'react';
import Nav from './NavbarElements';
const Navbar = () => {
return (
<Nav>

</Nav> 
);
};
export default Navbar;

在这里定义:

import styled from 'styled-components';
export const Nav = styled.nav`
background: #000;
`;

简单。现在，由于React中的一些钩子错误，我决定转换我的App.js文件。当你下载这个盒子时，App是一个Class组件。这意味着你不能在里面使用hook(据我所知)。因此，我的下一步是将这个Class组件转换为一个Functional组件(React社区的一些用户帮助我完成了这项任务)。结果是:

function App() {
const [state, setState] = useState({ storageValue: 0, web3: null, accounts: null, contract: null });
useEffect(() => {    
async function init() {
try {
const web3 = await getWeb3();
const accounts = await web3.eth.getAccounts();

const networkId = await web3.eth.net.getId();
const deployedNetwork = SimpleStorageContract.networks[networkId];
const instance = new web3.eth.Contract(
SimpleStorageContract.abi,
deployedNetwork && deployedNetwork.address
);

instance.options.address = "0xA65990EC0CA555d2eCDD1d84E9D1397CFA967E60"

setState(value => ({ ...value, web3, accounts, contract: instance }));
} catch (error) {
alert("Failed to load web3, accounts, or contract. Check console for details.");
console.error(error);
}
}
init();
}, []);

useEffect(() => {
async function runExample (accounts, contract) {
await contract.methods.set(25).send({ from: accounts[0] });
const response = await contract.methods.get().call();

setState(value => ({ ...value, storageValue: response }));
};
if(state.accounts != null && state.contract != null) {
runExample(state.accounts, state.contract);
}
}, [state.accounts, state.contract]);

if (!state.web3) {
return <div>Loading Web3, accounts, and contract...</div>;
}
return (
<div>
<Navbar />
<h1>This is a test</h1>
</div>
);
}
export default App;

代码经过审查，似乎没有问题。我也找不到任何错误。但是它再次抛出钩子错误，但是一些用户认为这可能是转移注意力，因为据我所知，我没有使用任何钩子。如果我在App.js文件的末尾删除<Navbar />标签，应用程序可以完美地工作。

错误:无效钩子调用。钩子只能在函数体内部调用函数分量的。这可能发生在以下情况之一原因:

1. 你可能有不匹配的版本的React和渲染器(如React DOM)
2. 你可能违反了Hooks的规则
3. 你可能在同一个应用程序中有多个React副本

问题表明代码行(对不起，我还不能发布图片):

setState(value => ({ ...value, web3, accounts, contract: instance }));

另外，我检查了我的版本:

• npm view react version: 17.0.2
• npm view react-native version: 0.65.1

但是，在我的json文件中，似乎我有另一个版本:

"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"dotenv": "^10.0.0",
"react": "16.11.0",
"react-dom": "16.11.0",
"react-scripts": "3.2.0",
"truffle-hdwallet-provider": "^1.0.17",
"web3": "1.2.2"

如果有必要，我可以为我的项目提供一个沙箱。拜托，这快把我逼疯了。

Answer 1

• 确保你安装了最新的React和ReactDom包。如果它们不兼容，您可能会得到错误

• 确保你用()包裹div，这样它就知道它是一个react函数。

  if (!state.web3) {
  return  (
  <div>Loading Web3, accounts, and contract...</div>;
  )
  }