反应：无法读取未定义的属性“读取上下文”

Posted 2023-02-21

【中文标题】反应：无法读取未定义的属性“读取上下文”

【英文标题】：React: Cannot ready property 'readContext' of undefined

【发布时间】：2019-06-12 18:35:25

【问题描述】：

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

【参考方案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);

新 -:

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);

【参考方案2】：

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 版本。

【参考方案3】：

我从网上找到的这个问题的解决方法是……

如果你只是想在开发环境中运行程序，你可以自己修改'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);
         

这在我的代码中有效。