Реагирует: Невозможно подготовить свойство readContext из неопределенного

Question

Reaction-кеш не работает с 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

Answer 1

Текущая альфа react-cache@2.0.0-alpha.1 не совместима с недавно опубликованными 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.

Answer 2

Изменить / Заменить код в'act-cache / cjs / реагировать-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);
}

NEW -:

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

Answer 3

Обход этой проблемы, найденный мной в Интернете, ...

Если вы просто хотите запустить программу в среде разработки, вы можете самостоятельно изменить код в 'response-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);
         }

И это работает в моем коде.