Javascript drizzle useCacheCall（）期间出错：TypeError:无法读取属性'；方法'；未定义的
我试图从两个不同的地方调用React组件的drizzle useCacheCall（）钩子。这是调用的React组件Javascript drizzle useCacheCall（）期间出错：TypeError:无法读取属性'；方法'；未定义的,javascript,react-hooks,drizzle,Javascript,React Hooks,Drizzle,我试图从两个不同的地方调用React组件的drizzle useCacheCall（）钩子。这是调用的React组件 const FamilyContainer = ({ member }) => { console.log("inside family container, member: ", member); const { useCacheCall } = drizzleReactHooks.useDrizzle(); const organizat
const FamilyContainer = ({ member }) => {
console.log("inside family container, member: ", member);
const { useCacheCall } = drizzleReactHooks.useDrizzle();
const organization = useCacheCall("MyContract", "getOrganization", member);
console.log("organization: ", organization && organization);
const maxLevel = useCacheCall("MyContract", "levels");
console.log("maxLevel: ", maxLevel && typeof maxLevel);
if (!isLoaded(organization) || !isLoaded(maxLevel)) {
return "loading...";
}
if (isEmpty(organization) || isEmpty(maxLevel)) return <PageNotFound />;
return (
<FamilySection
organization={organization}
maxLevel={parseInt(maxLevel, 10)}
/>
);
};
export default FamilyContainer;
const FamilyContainer=（{member}）=>{
console.log（“在族容器内，成员：”，成员）；
const{useCacheCall}=drizzleacthooks.usetrizzle（）；
const organization=useCacheCall（“MyContract”、“getOrganization”、member）；
console.log（“组织：”，组织和组织）；
const maxLevel=useCacheCall（“MyContract”、“levels”）；
log（“maxLevel:，maxLevel&&typeof maxLevel”）；
如果（！isLoaded（组织）| |！isLoaded（maxLevel））{
返回“加载…”；
}
如果（isEmpty（组织）| isEmpty（maxLevel））返回；
返回(
);
};
导出默认家庭容器；
const InviteReceived = ({ playerAccount, inviterData }) => {
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
}));
const classes = useStyles();
const history = useHistory();
return (
<Grid container spacing={0}>
<Grid item xs={12} sm={12} md={12} lg={5}>
<Box
display="flex"
flexDirection="column"
justifyContent="center"
p={1}
m={0}
bgcolor="black"
>
<InviteReceivedSection
playerAccount={playerAccount}
inviterAccount={inviterData.ID}
/>
<PayTributeSection playerAccount={playerAccount} />
</Box>
</Grid>
<Grid item xs={12} sm={12} md={12} lg={7}>
<FamilyContainer member={inviterData.ID} />
</Grid>
</Grid>
);
};
export default InviteReceived;
const inviterReceived=（{playerAccount，inviterData}）=>{
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
}));
const classes=useStyles（）；
const history=useHistory（）；
返回(
);
};
已收到的导出默认值；
const MemberComponent=（{playerAccount}）=>{
日志（“内部成员组件，playeraccount”，playeraccount）；
const useStyles=makeStyles（（主题）=>({
根目录：{
flexGrow:1，
},
}));
const classes=useStyles（）；
const history=useHistory（）；
返回(
);
};
导出默认成员组件；
TypeError: Cannot read property 'methods' of undefined
current
C:/src/hooks/create-use-cache-call.js:19
16 | {}
17 | )
18 | } else {
> 19 | const instance = drizzle.contracts[contractNameOrNames]
| ^ 20 | const cacheKey = instance.methods[methodNameOrFunction].cacheCall(...args)
21 | const cache =
22 | drizzleState.contracts[contractNameOrNames][methodNameOrFunction][
View compiled
e.useDrizzleState
C:/src/hooks/index.js:36
33 |
34 | // This is the escape hatch mentioned above. We keep a ref to `args` and whenever they change, we immediately update the state just like in the subscription.
35 | // This won't have any effect if `args` is undefined.
> 36 | const argsRef = useRef(args)
| ^ 37 | const [state, setState] = useState(
38 | mapStateRef.current(drizzle.store.getState())
39 | )
View compiled
(anonymous function)
C:/src/hooks/create-use-cache-call.js:8
5 | methodNameOrFunction,
6 | ...args
7 | ) => {
> 8 | const isFunction = typeof methodNameOrFunction === 'function'
9 | const drizzleState = useDrizzleState(drizzleState => {
10 | if (isFunction) {
11 | return contractNameOrNames.reduce(
View compiled
FamilyContainer
C:/code/MyContract/codebase/client/src/containers/FamilyContainer.js:10
7 | const FamilyContainer = ({ member }) => {
8 | console.log("inside family container, member: ", member);
9 | const { useCacheCall } = drizzleReactHooks.useDrizzle();
> 10 | const organization = useCacheCall("MyContract", "getOrganization", member);
11 | console.log("organization: ", organization && organization);
12 |
13 | const maxLevel = useCacheCall("MyContract", "levels");
View compiled
▶ 16 stack frames were collapsed.
Module../src/index.js
C:/code/MyContract/codebase/client/src/index.js:100
97 | const drizzle = new Drizzle(drizzleOptions, reduxStore);
98 | console.log("Drizzle: ", drizzle, " reduxStore: ", reduxStore);
99 |
> 100 | ReactDOM.render(
101 | <React.StrictMode>
102 | <ThemeProvider theme={theme}>
103 | <drizzleReactHooks.DrizzleProvider drizzle={drizzle}>
View compiled
__webpack_require__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
fn
C:/code/MyContract/codebase/client/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:7398:18
__webpack_require__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
checkDeferredModules
C:/code/MyContract/codebase/client/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
http://localhost:3000/static/js/bundle.js:33:19
30 | /******/ deferredModules.push.apply(deferredModules, executeModules || []);
31 | /******/
32 | /******/ // run deferred modules when all chunks ready
> 33 | /******/ return checkDeferredModules();
| ^ 34 | /******/ };
35 | /******/ function checkDeferredModules() {
36 | /******/ var result;
View source
TypeError:无法读取未定义的属性“methods”
现在的
C:/src/hooks/create-use-cache-call.js:19
16 | {}
17 | )
18 |}其他{
>19 | const实例=drizzle.contracts[合同名称或名称]
|^20 | const cacheKey=instance.methods[methodNameOrFunction].cacheCall（…args）
21 |常数缓存=
22 | drizzleState.合同[合同名称或名称][方法名称或功能][
视图编译
e、 使用毛毛雨状态
C:/src/hooks/index.js:36
33 |
34 |//这是上面提到的转义图案填充。我们保留对'args'的引用，每当它们发生更改时，我们都会立即更新状态，就像在订阅中一样。
35 |//如果'args'未定义，则这不会产生任何影响。
>36 |常数argsRef=useRef（args）
|^37 | const[状态，设置状态]=使用状态(
38 | mapStateRef.current（drizzle.store.getState（））
39 | )
视图编译
（匿名函数）
C:/src/hooks/create-use-cache-call.js:8
5 |方法名称或函数，
6 |…args
7 | ) => {
>8 | const isFunction=typeof methodNameOrFunction==='function'
9 | const drizzleState=使用drizzleState（drizzleState=>{
10 |如果（isFunction）{
11 |退货合同名称或名称减少(
视图编译
家庭容器
C:/code/MyContract/codebase/client/src/containers/FamilyContainer.js:10
7 | const FamilyContainer=（{member}）=>{
8 | console.log（“家庭容器内，成员：，成员”）；
9 | const{useCacheCall}=drizzleacthooks.usetrizzle（）；
>10 | const organization=useCacheCall（“MyContract”，“getOrganization”，成员）；
11 | console.log（“组织：，组织和组织”）；
12 |
13 | const maxLevel=useCacheCall（“MyContract”、“levels”）；
视图编译
▶ 16个烟囱框架倒塌。
模块../src/index.js
C:/code/MyContract/codebase/client/src/index.js:100
97 |恒细雨=新细雨（细雨选项，reduxStore）；
98 | console.log（“Drizzle:，Drizzle，“reduxStore:，reduxStore”）；
99 |
>100 | ReactDOM.render(
101 |
102 |
103 |
视图编译
__需要的网页__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 |//执行模块函数
>784 | modules[moduleId]。调用（module.exports，module，module.exports，hotCreateRequire（moduleId））；
| ^ 785 |
786 |//将模块标记为已加载
787 | module.l=真；
视图编译
fn
C:/code/MyContract/codebase/client/webpack/bootstrap:150
147 | );
148 | hotCurrentParents=[]；
149 | }
>150 |返回|网页|要求| |请求|；
| ^ 151 | };
152 | var ObjectFactory=函数ObjectFactory（名称）{
153 |返回{
视图编译
1.
http://localhost:3000/static/js/main.chunk.js:7398:18
__需要的网页__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 |//执行模块函数
>784 | modules[moduleId]。调用（module.exports，module，module.exports，hotCreateRequire（moduleId））；
| ^ 785 |
786 |//将模块标记为已加载
787 | module.l=真；
视图编译
检查延迟模块
C:/code/MyContract/codebase/client/webpack/bootstrap:45
42 | }
43 |如果（履行）{
44 |延迟模块。拼接（i--，1）；
> 45 |
TypeError: Cannot read property 'methods' of undefined
current
C:/src/hooks/create-use-cache-call.js:19
16 | {}
17 | )
18 | } else {
> 19 | const instance = drizzle.contracts[contractNameOrNames]
| ^ 20 | const cacheKey = instance.methods[methodNameOrFunction].cacheCall(...args)
21 | const cache =
22 | drizzleState.contracts[contractNameOrNames][methodNameOrFunction][
View compiled
e.useDrizzleState
C:/src/hooks/index.js:36
33 |
34 | // This is the escape hatch mentioned above. We keep a ref to `args` and whenever they change, we immediately update the state just like in the subscription.
35 | // This won't have any effect if `args` is undefined.
> 36 | const argsRef = useRef(args)
| ^ 37 | const [state, setState] = useState(
38 | mapStateRef.current(drizzle.store.getState())
39 | )
View compiled
(anonymous function)
C:/src/hooks/create-use-cache-call.js:8
5 | methodNameOrFunction,
6 | ...args
7 | ) => {
> 8 | const isFunction = typeof methodNameOrFunction === 'function'
9 | const drizzleState = useDrizzleState(drizzleState => {
10 | if (isFunction) {
11 | return contractNameOrNames.reduce(
View compiled
FamilyContainer
C:/code/MyContract/codebase/client/src/containers/FamilyContainer.js:10
7 | const FamilyContainer = ({ member }) => {
8 | console.log("inside family container, member: ", member);
9 | const { useCacheCall } = drizzleReactHooks.useDrizzle();
> 10 | const organization = useCacheCall("MyContract", "getOrganization", member);
11 | console.log("organization: ", organization && organization);
12 |
13 | const maxLevel = useCacheCall("MyContract", "levels");
View compiled
▶ 16 stack frames were collapsed.
Module../src/index.js
C:/code/MyContract/codebase/client/src/index.js:100
97 | const drizzle = new Drizzle(drizzleOptions, reduxStore);
98 | console.log("Drizzle: ", drizzle, " reduxStore: ", reduxStore);
99 |
> 100 | ReactDOM.render(
101 | <React.StrictMode>
102 | <ThemeProvider theme={theme}>
103 | <drizzleReactHooks.DrizzleProvider drizzle={drizzle}>
View compiled
__webpack_require__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
fn
C:/code/MyContract/codebase/client/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:7398:18
__webpack_require__
C:/code/MyContract/codebase/client/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
checkDeferredModules
C:/code/MyContract/codebase/client/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
http://localhost:3000/static/js/bundle.js:33:19
30 | /******/ deferredModules.push.apply(deferredModules, executeModules || []);
31 | /******/
32 | /******/ // run deferred modules when all chunks ready
> 33 | /******/ return checkDeferredModules();
| ^ 34 | /******/ };
35 | /******/ function checkDeferredModules() {
36 | /******/ var result;
View source
<drizzleReactHooks.Initializer
error="There was an error."
loadingContractsAndAccounts="loading contracts & accounts..."
loadingWeb3="loading web3..."
>
<App/>
</drizzleReactHooks.Initializer>