Der React-Cache funktioniert nicht mit Suspense.

Mein Code

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

Versionen, die ich benutze:

  react: 16.8.0-alpha.0
  react-dom: 16.8.0-alpha.0
  react-cache: 2.0.0-alpha.1
1
Hemadri Dasari 18 Jän. 2019 im 16:22

3 Antworten

Beste Antwort

Die Problemumgehung für dieses Problem, die ich im Internet gefunden habe, ist ...

Wenn Sie das Programm nur in der Entwicklungsumgebung ausführen möchten, können Sie den Code in 'react-cache / cjs / react-cache.development.js' selbst ändern: old:

    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' wird nur in der Funktion readContext verwendet. also hier ist das neue:

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

Und das funktioniert in meinem Code.

1
Hemadri Dasari 18 Jän. 2019 im 13:25

Das aktuelle Alpha von react-cache@2.0.0-alpha.1 ist nicht kompatibel mit neu veröffentlichten react@16.8.0-alpha.0 und react-dom@16.8.0-alpha.0.

Downgrade auf react@16.7.0-alpha.1 und react-dom@16.7.0-alpha.1, bis eine neue kompatible Alpha-Version von react-cache veröffentlicht wird.

2
Ganapati V S 25 Jän. 2019 im 13:32

Ändern / Ersetzen Sie den Code in 'react-cache / cjs / react-cache.development.js'.

ALT -:

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

NEU -:

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
Nilesh Kadam 24 März 2019 im 10:00