反应:无法准备好 属性 'readContext' 的未定义
React: Cannot ready property 'readContext' of undefined
react-cache 不适用于 Suspense。
我的代码
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { unstable_createResource as createResource } from "react-cache";
const MarkdownCache = createResource(input => {
return new Promise(resolve => resolve(input));
});
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Test />
</Suspense>
);
}
const Test = () => {
const input = MarkdownCache.read("Test react cache");
return input;
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
我使用的版本:
react: 16.8.0-alpha.0
react-dom: 16.8.0-alpha.0
react-cache: 2.0.0-alpha.1
我从网上找到的解决这个问题的方法是...
如果只是想运行开发环境中的程序,可以自行修改'react-cache/cjs/react-cache.development.js'中的代码:
旧:
var currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
function readContext(Context, observedBits) {
var dispatcher = currentOwner.currentDispatcher;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
'currentOwner' 除了在函数 readContext 中没有用处。所以这是新的:
var currentDispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
function readContext(Context, observedBits) {
var dispatcher = currentDispatcher.current;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
这在我的代码中有效。
react-cache@2.0.0-alpha.1
的当前 alpha 与新发布的 react@16.8.0-alpha.0
和 react-dom@16.8.0-alpha.0
不兼容。
降级到 react@16.7.0-alpha.1
和 react-dom@16.7.0-alpha.1
,直到 react-cache
的新兼容 alpha 版本发布。
Modify/Replace 'react-cache/cjs/react-cache.development.js'
中的代码
旧-:
var currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
function readContext(Context, observedBits) {
var dispatcher = currentOwner.currentDispatcher;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
新-:
const ReactCurrentDispatcher =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ReactCurrentDispatcher;
function readContext(Context, observedBits) {
const dispatcher = ReactCurrentDispatcher.current;
if (dispatcher === null) {
throw new Error(
'react-cache: read and preload may only be called from within a ' +
"component's render. They are not supported in event handlers or " +
'lifecycle methods.',
);
}
return dispatcher.readContext(Context, observedBits);
}
react-cache 不适用于 Suspense。
我的代码
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { unstable_createResource as createResource } from "react-cache";
const MarkdownCache = createResource(input => {
return new Promise(resolve => resolve(input));
});
const App = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<Test />
</Suspense>
);
}
const Test = () => {
const input = MarkdownCache.read("Test react cache");
return input;
}
const rootElement = document.getElementById("root"); ReactDOM.render(, rootElement);
我使用的版本:
react: 16.8.0-alpha.0
react-dom: 16.8.0-alpha.0
react-cache: 2.0.0-alpha.1
我从网上找到的解决这个问题的方法是...
如果只是想运行开发环境中的程序,可以自行修改'react-cache/cjs/react-cache.development.js'中的代码: 旧:
var currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
function readContext(Context, observedBits) {
var dispatcher = currentOwner.currentDispatcher;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
'currentOwner' 除了在函数 readContext 中没有用处。所以这是新的:
var currentDispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher;
function readContext(Context, observedBits) {
var dispatcher = currentDispatcher.current;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
这在我的代码中有效。
react-cache@2.0.0-alpha.1
的当前 alpha 与新发布的 react@16.8.0-alpha.0
和 react-dom@16.8.0-alpha.0
不兼容。
降级到 react@16.7.0-alpha.1
和 react-dom@16.7.0-alpha.1
,直到 react-cache
的新兼容 alpha 版本发布。
Modify/Replace 'react-cache/cjs/react-cache.development.js'
中的代码旧-:
var currentOwner = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner;
function readContext(Context, observedBits) {
var dispatcher = currentOwner.currentDispatcher;
if (dispatcher === null) {
throw new Error('react-cache: read and preload may only be called from within a ' + "component's render. They are not supported in event handlers or " + 'lifecycle methods.');
}
return dispatcher.readContext(Context, observedBits);
}
新-:
const ReactCurrentDispatcher =
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
.ReactCurrentDispatcher;
function readContext(Context, observedBits) {
const dispatcher = ReactCurrentDispatcher.current;
if (dispatcher === null) {
throw new Error(
'react-cache: read and preload may only be called from within a ' +
"component's render. They are not supported in event handlers or " +
'lifecycle methods.',
);
}
return dispatcher.readContext(Context, observedBits);
}