React: バグ：「別のコンポーネントの関数本体内からコンポーネントを更新できない」を修正するのが難しすぎる。

この警告を以前に追加しておけばよかったのに。 申し訳ありません。 フックの導入による見落としでした。 これは、フックを使用する新しいコードが原因であると考えられます。これは、はるか以前にクラスに対して同じ警告がすでに発生していたため、以前のコードではすでにこの警告が表示されていたためです。

これは、Reactの将来のバージョンでハードフェイルを開始する可能性が高いことに注意してください。 意図的またはその他（このパターンには多くのバグがあります）。 したがって、それにもかかわらず、古いバージョンで立ち往生してしまう可能性があります。 修正できない場合は、古いバージョンのReactに固定することをお勧めします。

ただし、そうは言っても、ライブラリの作成者から修正バージョンを公開するための支援を得ることができるかどうかを確認するなど、これらの修正をできる限り簡単に行えるように支援したいと考えています。

Chromeコンソールで小さな>矢印を展開すると、（スクリーンショットのコンポーネントスタックに加えて）追加のスタックトレースも表示されます。 あなたもそれを投稿できますか？ これにより、レンダリングで副作用を引き起こしている正確なコールサイトが表示されます。

私と一緒にこれは私がformikを使うときに現れます

@sebmarkbageご

そこに貼り付けるか、ペーストビンへのリンクを与えるつもりでしたが、別の方向を試しました。 いくつかの使用済みライブラリのGithubの問題を調べたところ、容疑者の1人がredux-formであることがわかりました： https ：

しかし、それでも、私はこの問題を閉じないようにお願いしたいと思います。他の開発者に、これらのエラーの原因となるライブラリについてここで言及することを提案します。

@RodolfoSilvaそれはformikによって引き起こされていると確信していますか？ はいの場合、そこで問題を作成し、ここにリンクを投稿していただけますか？ リストに複数の項目が含まれる場合は、最初のメッセージの冒頭でそのような問題のリストを作成します。

これは本当にできるだけ早く対処する必要があります。 アップグレードが不可能になります。 エラートレースはほとんど不可能です。

うーん。 エラーメッセージでどの行を探すべきかを説明することが役立つかどうか疑問に思います。

この場合、最初に検索する行はdispatchAction後の行です。 それがReactを呼び出すものでなければなりません。

@RodolfoSilva共有できるものであれば、 FormItemInput.jsのソースを投稿できますか？ 71行目でdispatchまたはsetStateを呼び出しているようです。

このエラーメッセージを変更して、エラーの原因となっているコード行を正確に含めることが不可欠だと思います。 問題の原因がローカルコードなのかライブラリコードなのかを特定することはほとんど不可能です。 react-reduxやreact-routerなどの外部可能性が非常に高いですが、それを簡単に特定することは不可能です。

React-Reduxに問題はないと確信していますが、エラーメッセージとコンポーネントスタックにより、実際に何が起こっているのかを知るのが難しいことに同意しました。

Redux-formでも同じ問題に直面しています！

私は同じ問題を抱えており、 reduxフィールドに初めて書き込んだとき、またはすべてクリアしたときに警告が表示されているのが

私もその問題を抱えています、これは私のコンポーネントです：

`const [price、setPrice] = useState（0）;

const updatePrice =（newPrice）=> {
setPrice（newPrice）
}
<CardContainer onPriceUpdated = {updatePrice}> CardContainer>
`

したがって、この場合、私のCardContainerコンポーネントは、価格が更新され、親コンポーネントが新しい王子をレンダリングしたときに、親コンポーネントに通知します。
したがって、Reactは、他のコンポーネントの機能を使用してコンポーネントの状態を更新しようとしていることを警告していると思います。
私はreactが初めてなので、これがReactパターンなのか、それとも実際にはバグなのかわかりません。

この警告を解決するための提案があれば、私はそれをいただければ幸いです」

@ l0gicgate

このエラーメッセージを変更して、エラーの原因となっているコード行を正確に含めることが不可欠だと思います。

JavaScriptでできることには限界があります。 ただし、すべての情報はブラウザに表示されるスタックにあります。 あなたがする必要があるのは、Reactの中にある行をスキップすることです。

JavaScriptスタックを表示するには、エラーメッセージの横にある小さな矢印をます。

たとえば、前のスクリーンショットを見てください。

スタックを掘り下げるのは少し面倒ですが、最初の数フレームをスキップするのはそれほど難しいことではありません。 次のフレームが問題の原因です。 この場合、Formikライブラリ内の何かのように見えます。 だからあなたはそれで問題を提出することができます。

@martinezwilmerこの例は小さすぎて役に立ちません。 サンドボックスを作成してください。

将来のコメンテーターへ。 新しい警告を見るのはイライラすることを理解しています。 しかし、それはあなたのコードにバグを引き起こしてています。 皮肉や煩わしさの表現をご遠慮いただければ幸いです。

スタックトレースのどこから来ているのかわからない場合は、スクリーンショットを投稿するか、再現サンドボックスを作成してください。サポートさせていただきます。 これらのほとんどはおそらくいくつかのライブラリからのものであるため、最も生産的な方法は、これらのケースを減らしてから、それらのライブラリで問題を報告することです。

皆さん、ありがとうございました。

ここでの警告に関係する正確な線を見つけるのは難しいです：

@gaearonもう一度、それについて1つのヒントがありますか？

ここでの警告に関係する正確な線を見つけるのは難しいです：

何が難しいのですか？ 上で述べたように、それは右側に「反応する」と書かれていない最初の行です。 この場合、ReduxからのconnectAdvancedです。 メンテナがこれを見る機会があるように、ReactReduxに問題を提出してください。

アップスレッドで言ったように、ここで起こっていることがReact-Reduxの問題であるとしたら、私は_非常に_驚きます。

とは言うものの、そもそも何がこのメッセージをトリガーするのか正確にはわかりません。 エラーメッセージの内容を半分理解しましたが、実際にはどのようなアプリコードパターンがその動作の例になるでしょうか？

私は最近これに遭遇し、修正はsetStateハンドラー呼び出しサイトをuseEffectでラップしていました： https ： onChangeとonSubmitは、チェーンの上位にあるsetState使用します）。

@martinezwilmer onPriceUpdatedはどこで呼び出されていますか？ たぶんそれをuseEffect包んでみてください？

同じ問題がurql

use-subscription + wonka（ストリーム用）を使用して更新を調整していますが、更新は同期して行われる可能性があります。 ここではすでにtodosフェッチしているので、 Openボタンをクリックすると、結果がすぐにポップアップするはずですが、これにより次のエラーが発生するようです。

私たちの場合、これは意図されたものであり、同期結果に対してfetching: trueだけを表示することはできません。その結果、インターフェイスがジャンプします。

これは現在、サードパーティのライブラリでますます増え始めています： urql 、 Apollo 。

私はこれに遭遇し、数時間の間、問題は私のコードにあると思いました。 圧縮されたスタックトレースはコンポーネントを指しています。明示的にエラーをトリガーしたときに、展開されたスタックトレースにサードパーティのライブラリが表示されることは珍しくありません。 この特定の警告に関する私の（限定的ではありますが）調査から、ほとんどの開発者がこの問題を自分で引き起こしているのではなく、発生しているコードに依存しているようです。 通常、アップストリームのバグではないと想定することをお勧めしますが、アップストリームのバグである場合、存在しないコードの問題を追跡するために時間を浪費することはかなり苛立たしいことです。 平均的なユーザーが自分が書いたコードなのか、それとも依存しているコードが問題の原因なのかを判断するのに役立つReactでできることはありますか？

アポロの問題から私が注意することの1つは次のとおりです。

警告のスタックトレースは、変更を初期化したコンポーネントを示しており、それらの変更によって[原文のまま]再レンダリングされるコンポーネントではありません。

これが正しければ、Reactはここでより多くの情報を提供できますか？ おそらく、開始コンポーネントとそれが更新されたコンポーネントの両方を教えてくれますか？

@hugoのように、新しいIonicアプリケーションをテスト

1. npx ionic start demo sidemenu --type=react
2. react-scripts test

実際、原因はスタックトレースの中央と下部に埋もれています。

console.error node_modules/react-dom/cjs/react-dom.development.js:88
    Warning: Cannot update a component from inside the function body of a different component.
        in Route (at App.tsx:37)
        in View (created by StackManagerInner)
        in ViewTransitionManager (created by StackManagerInner)
        in ion-router-outlet (created by IonRouterOutlet)
        in IonRouterOutlet (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (created by StackManagerInner)
        in StackManagerInner (created by Context.Consumer)
        in Unknown (created by Component)
        in Component (created by ForwardRef(IonRouterOutlet))
        in ForwardRef(IonRouterOutlet) (at App.tsx:36)
        in ion-split-pane (created by IonSplitPane)
        in IonSplitPane (created by ForwardRef(IonSplitPane))
        in ForwardRef(IonSplitPane) (at App.tsx:34)
        in NavManager (created by RouteManager)
        in RouteManager (created by Context.Consumer)
        in RouteManager (created by IonReactRouter)
        in Router (created by BrowserRouter)
        in BrowserRouter (created by IonReactRouter)
        in IonReactRouter (at App.tsx:33)
        in ion-app (created by IonApp)
        in IonApp (created by ForwardRef(IonApp))
        in ForwardRef(IonApp) (at App.tsx:32)
        in App (at App.test.tsx:6)

この問題は、この問題に関して私が見つけた最も近い問題でした。

https://github.com/mobxjs/mobx-react/issues/846で、mobxでこの問題を引き起こす特定のパターンを見つけました

@sebmarkbageこの問題を再現できなくなりました。 いくつかのライブラリと問題を更新しました。

@jgoux同じ問題に直面しているようです@ Clovis ^^発見

更新がreact 16.13.0反応した後、このエラーが発生し始めました。 特定のアクションが実行された後、コンポーネントの1つが別のコンポーネントを更新しているため、問題はかなり明確です。 ただし、なぜこれが警告をスローするのかわかりません。 これを回避する方法について何か提案はありますか？

@gaearonスタックからデバッグする方法の詳細に感謝します。その例を示さなかった場合、私は個人的にこのエラーがどこから来たのかを理解できなかったでしょう。 🙏

問題が関連しているかどうかはわかりませんが、フォームコンポーネントの状態を更新しようとしていますが、onChangeハンドラーを追加しようとすると、このエラーが発生し続けます。 念のために言っておきますが、私はreact-jsonschema-formを使用してFormコンポーネントをインポートし、そのonChangeプロパティを使用して状態を更新しています。

私にとって、これが問題の原因となるパターンです。

これを回避する方法があるかもしれません。 しかし、コンソールログは私を385行目にまっすぐに向けました

私は反応するのは初めてですが、次のようなコードがありました：

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

その結果： Cannot update a component from inside the function body of a different component.

私がしなければならなかったのは、次のようにMobileNavのsetMobileNavOpenに矢印関数を追加することです。

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

そしてそれは問題を解決します、これが誰かを助けることを願っています！

私は反応するのは初めてですが、次のようなコードがありました：

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={setMobileNavOpen(false)} //problem here
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

その結果： Cannot update a component from inside the function body of a different component.

私がしなければならなかったのは、次のようにMobileNavのsetMobileNavOpenに矢印関数を追加することです。

import React, { useState } from "react";

function Home() {
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(true)}
        type="button"
        className="btn"
      >
        X
      </button>
      {mobileNavOpen && <MobileNav setMobileNavOpen={setMobileNavOpen}/>}
    </div>
  );
}

function MobileNav() {
  return (
    <div>
      <button
        onClick={(): void => setMobileNavOpen(false)} //fixes problem
        type="button"
        className="btn"
      >
        X
      </button>
    </div>
  );
}

export default Home;

そしてそれは問題を解決します、これが誰かを助けることを願っています！

あなたの例は、実際には人々が反応することで犯す初期の過ちの1つです。 ここで議論されているのとまったく同じ問題かどうかはわかりません。 ここでのあなたの行： onClick={setMobileNavOpen(false)は、クリックではなく、ボタンの入札中に関数を呼び出しています。 そのため、矢印関数でラップすると修正されます。

React Routerでこの問題が発生し、ユーザーを別の場所に<Redirect>する前に、Reduxアクションをディスパッチする必要がありました。 問題は、ディスパッチが完了する前にリダイレクトが発生したことであるように思われました。 私は自分の行動を約束することで問題を解決しました。

前：

<Route
  render={routeProps => {
    setRedirectionTarget(somePath(routeProps));
    return <Redirect to={someOtherPath} />;
  }}
/>;

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: (target: string | null) => dispatch(setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): SetRedirectionTarget => {
  return {
    type: SET_REDIRECTION_TARGET,
    location
  };
};

後：

function mapDispatchToProps(dispatch: ThunkDispatch) {
  return {
    setRedirectionTarget: async (target: string | null) => dispatch(await setRedirectionTarget(target))
  };
}

export const setRedirectionTarget = (location: string | null): Promise<SetRedirectionTarget> => {
  return Promise.resolve({
    type: SET_REDIRECTION_TARGET,
    location
  });
};

エラーメッセージに、現在レンダリングしているコンポーネントと、setStateが呼び出されているコンポーネントの両方の名前を含めるとよいと思います。 誰かがこれのためにPRを送りたいですか？

エラーメッセージに、現在レンダリングしているコンポーネントと、setStateが呼び出されているコンポーネントの両方の名前を含めるとよいと思います。 誰かがこれのためにPRを送りたいですか？

これを見てうれしいです。 私が知っておくべきポインターはありますか？

@ samcooke98このhttps://github.com/facebook/react/pull/18316のPRを開きました

他の人が指摘しているように、Apolloなどのフックにサブスクリプションがあり、データの受信時にストアを更新しようとすると、この問題が発生する可能性があります。 簡単な修正は、 useEffectを使用することです。

export const useOrderbookSubscription = marketId => {
  const { data, error, loading } = useSubscription(ORDERBOOK_SUBSCRIPTION, {
    variables: {
      marketId,
    },
  })

  const formattedData = useMemo(() => {
    // Don't dispatch in here.
  }, [data])

  // Don't dispatch here either

  // Dispatch in a useEffect
  useEffect(() => {
    orderbookStore.dispatch(setOrderbookData(formattedData))
  }, [formattedData])

  return { data: formattedData, error, loading }
}

Hyperでこの問題に直面していましたが、フックを使用しておらず、呼び出しスタックからのレンダリング呼び出しで何も見つかりませんでした。 しかし、スタックのUNSAFE_componentWillReceivePropsに呼び出しがありました。 componentDidUpdate更新すると、問題が修正されましたhttps://github.com/zeit/hyper/pull/4382
それが誰かを助けるかもしれないならここにそれを投稿しました

ここでも同じですが、UNSAFE_componentWillMount呼び出しがあり、変更/削除すると問題が修正されました

しかし、フックを使用しておらず、呼び出しスタックからのレンダリング呼び出しで何も見つかりませんでした

これは奇妙に聞こえます。 そのとき、この警告がどのように表示されるのかわかりません。 setStateが関数コンポーネントに属している場合にのみ起動します。 あなたのスタックはどのようなものですか？

しかし、フックを使用しておらず、呼び出しスタックからのレンダリング呼び出しで何も見つかりませんでした

これは奇妙に聞こえます。 そのとき、この警告がどのように表示されるのかわかりません。 setStateが関数コンポーネントに属している場合にのみ起動します。 あなたのスタックはどのようなものですか？

Reduxでコンポーネントをクラス化し、コンポーネントにプラグインを適用する関数。 たぶんそれが関数コンポーネントとしてカウントされる理由ですか？ しかし、なぜライフサイクルフックを更新すると修正されるのでしょうか。

わからない。 サンドボックスで孤立した例を作成してみてください。 私はあなたが予期しない何か他のことをしているかもしれないという予感があります。

孤立した例でそれを複製できるかどうかはわかりません。 原因を見つけるのに苦労し、スタックトレースにあり、更新が保留されていたため、ライフサイクルフックを更新したところです。 それはどういうわけか問題を修正しました。
ここで問題が発生したときのリポジトリを確認でき

UNSAFE_componentWillReceivePropsとcomponentDidUpdate両方がその時点でコンポーネントに含まれていた（安全でないものが誤ってそこに残されていた）という事実が原因でしょうか？

この警告も表示され、スタックトレースはsetScriptLoadedフックを指しています（カスタムフックについては以下を参照してください）。 したがって、 useEffectを使用していても、 setStateハンドラーが他の非同期コールバック内にネストされている場合（私の場合はsetTimeoutネストされている場合）、Reactは警告をスローするようです。 loadイベントハンドラー）？ 初めてフックを使用したので、アドバイスをいただければ幸いです。 ありがとうございました！

/**
 * Detect when 3rd party script is ready to use
 * 
 * <strong i="11">@param</strong> {function} verifyScriptLoaded Callback to verify if script loaded correctly
 * <strong i="12">@param</strong> {string} scriptTagId 
 */

export const useScriptLoadStatus = (verifyScriptLoaded, scriptTagId) => {
    let initLoadStatus = true; // HTML already includes script tag when rendered server-side
    if (__BROWSER__) {
        initLoadStatus = typeof verifyScriptLoaded === 'function' ? verifyScriptLoaded() : false;
    }
    const [isScriptLoaded, setScriptLoaded] = useState(initLoadStatus); 

    useEffect(() => {
        if (!isScriptLoaded) {
            // need to wrap in setTimeout because Helmet appends the script tags async-ly after component mounts (https://github.com/nfl/react-helmet/issues/146)
            setTimeout(() => {
                let newScriptTag = document.querySelector(`#${scriptTagId}`);
                if (newScriptTag && typeof verifyScriptLoaded === 'function') {
                    newScriptTag.addEventListener('load', () => { 
                        return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                    });
                    // double check if script is already loaded before the event listener is added
                    return verifyScriptLoaded() ? setScriptLoaded(true) : null;
                }
            }, 100);
        }
    });

    return isScriptLoaded;
};

@LabhanshAgrawal

UNSAFE_componentWillReceivePropsとcomponentDidUpdateの両方がその時点でコンポーネントに含まれていた（安全でないものが誤ってそこに残されていた）という事実が原因である可能性がありますか？

ここでは、ライフサイクルメソッドはまったく関係ないと思います。 これが、あなたの例で何かがおかしいと言っている理由です。

@suhanwCodeSandboxで完全な例を提供してください。 この警告の原因となるコードに問題はありません。

@LabhanshAgrawalフルスタックを投稿できますか？ あなたのUNSAFE_componentWillReceiveProps （レンダリングと同等）が別のコンポーネントでsetStateを呼び出していることが起こっているのではないかと思います。

backend.js:6 Warning: Cannot update a component from inside the function body of a different component.
    in Term                           (created by _exposeDecorated(Term))
    in _exposeDecorated(Term)         (created by DecoratedComponent)
    in DecoratedComponent             (created by TermGroup_)
    in TermGroup_                     (created by ConnectFunction)
    in ConnectFunction                (created by Connect(TermGroup_))
    in Connect(TermGroup_)            (created by _exposeDecorated(TermGroup))
    in _exposeDecorated(TermGroup)    (created by DecoratedComponent)
    in DecoratedComponent             (created by Terms)
    in div                            (created by Terms)
    in div                            (created by Terms)
    in Terms                          (created by _exposeDecorated(Terms))
    in _exposeDecorated(Terms)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)    (created by Hyper)
    in div                            (created by Hyper)
    in div                            (created by Hyper)
    in Hyper                          (created by _exposeDecorated(Hyper))
    in _exposeDecorated(Hyper)        (created by DecoratedComponent)
    in DecoratedComponent             (created by ConnectFunction)
    in ConnectFunction                (created by Connect(DecoratedComponent))
    in Connect(DecoratedComponent)
    in Provider
r                                     @ backend.js:6
printWarning                          @ react-dom.development.js:88
error                                 @ react-dom.development.js:60
warnAboutRenderPhaseUpdatesInDEV      @ react-dom.development.js:23260
scheduleUpdateOnFiber                 @ react-dom.development.js:21196
dispatchAction                        @ react-dom.development.js:15682
checkForUpdates                       @ connectAdvanced.js:88
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
checkForUpdates                       @ connectAdvanced.js:77
handleChangeWrapper                   @ Subscription.js:97
(anonymous)                           @ Subscription.js:23
batchedUpdates$1                      @ react-dom.development.js:21887
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ sessions.ts:124
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
onResize                              @ terms.ts:62
(anonymous)                           @ term.js:179
e.fire                                @ xterm.js:1
t.resize                              @ xterm.js:1
e.resize                              @ xterm.js:1
e.fit                                 @ xterm-addon-fit.js:1
fitResize                             @ term.js:291
UNSAFE_componentWillReceiveProps      @ term.js:408
callComponentWillReceiveProps         @ react-dom.development.js:12998
updateClassInstance                   @ react-dom.development.js:13200
updateClassComponent                  @ react-dom.development.js:17131
beginWork                             @ react-dom.development.js:18653
beginWork$1                           @ react-dom.development.js:23210
performUnitOfWork                     @ react-dom.development.js:22185
workLoopSync                          @ react-dom.development.js:22161
performSyncWorkOnRoot                 @ react-dom.development.js:21787
(anonymous)                           @ react-dom.development.js:11111
unstable_runWithPriority              @ scheduler.development.js:653
runWithPriority$1                     @ react-dom.development.js:11061
flushSyncCallbackQueueImpl            @ react-dom.development.js:11106
flushSyncCallbackQueue                @ react-dom.development.js:11094
batchedUpdates$1                      @ react-dom.development.js:21893
notify                                @ Subscription.js:19
notifyNestedSubs                      @ Subscription.js:92
handleChangeWrapper                   @ Subscription.js:97
dispatch                              @ redux.js:222
e                                     @ VM64:1
(anonymous)                           @ effects.ts:11
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
effect                                @ ui.ts:60
(anonymous)                           @ effects.ts:13
(anonymous)                           @ write-middleware.ts:14
(anonymous)                           @ index.js:11
(anonymous)                           @ plugins.ts:538
(anonymous)                           @ plugins.ts:540
(anonymous)                           @ index.js:11
dispatch                              @ redux.js:638
(anonymous)                           @ ui.ts:54
(anonymous)                           @ index.js:8
dispatch                              @ VM64:1
(anonymous)                           @ index.tsx:162
emit                                  @ events.js:210
(anonymous)                           @ rpc.ts:31
emit                                  @ events.js:210
onMessage                             @ init.ts:50

@gaearonは迅速な対応に感謝します。 CodeSandboxで例を作成する方法を見つけます（それは挑戦的です）が、それまでの間、これは私の完全なスタックトレースです

私のカスタムフックを指す行は次のとおりです： https ：//gist.github.com/suhanw/bcc2688bba131df8301dae073977654f#file -stack-trace-L144

カスタムフックの前後のスタックトレースに、さらに調査する必要があるものがあるかどうかを確認してお知らせいただければ素晴らしいと思います。 ありがとう！

@LabhanshAgrawalスタック内で、 UNSAFE_componentWillReceivePropsはいくつかのfitResizeを呼び出し、Reduxアクションをディスパッチします。これにより、一連のコンポーネントが更新されます。 したがって、問題。 そうですね、それをcomponentDidUpdateに変更すると機能します。

@suhanwスタックでは、 ModuleImpressionTrackerと呼ばれるものが、コンストラクター中にReduxアクションをディスパッチしているように見えます。 コンストラクターに副作用があってはなりません。 それが問題の原因であり、フックではないと思います。

なるほど、 UNSAFE_componentWillReceivePropsはレンダリングとしてカウントされますが、 componentDidUpdateはカウントされないということをこれから取り除きます。
setStateを実行する機能コンポーネントとフックの問題であることを少し明確にできますか？上記の説明からは明確に理解できませんでした。
質問が少しばかげているか、私の持ち帰りが間違っている場合は、お詫びします。私はこれに少し慣れていません。

@LabhanshAgrawal

setStateを実行する機能コンポーネントとフックの問題であることを少し明確にできますか？上記の説明からは明確に理解できませんでした。

正直なところ、途中にすべてのReduxが含まれているため、自分自身がよくわかりません。 React Reduxがどのように実装されているかにより、かなり混乱します。 誰かがReactだけを含み、クラスコンポーネントを使用する明確な再現を得ることができれば素晴らしいでしょう。

それでも、スタックトレースがたくさん貼り付けられているようで、タイプに関係なく、実際の問題の実際の再現は多くありません。

urqlは@gaearonを対象としていると

• <Todos />マウントしました。これにより、データがフェッチされてレンダリングされます。
• 前の設定では、 urqlClient接続されたストリームを設定しました
• 2番目の<Todos />をレンダリングすると、同じクエリと変数の組み合わせが生成されるため、最初のステップの<Todos />の結果が更新されます。
• use-subscriptionは両方に対してトリガーされます。

再現-最初のクエリが表示されたら、上部にある[開く]を押します。

更新をキューに入れることはできますが、コンテキストを使用してtop-downレンダリングを行わない限り、この問題を回避することはできません。 理論的には、これはこの場合の意図された動作です。 リレーがこれをどのように回避するのか興味があります。

編集： use-subscriptionのgetCurrentValueの間にすべてのサブスクライバーを更新するようにトリガーしないことで、urqlの場合の解決策を見つけた可能性があります

https://github.com/FormidableLabs/urql/commit/3a597dd92587ef852c18139e9781e853f763e930

さて、これを詳しく調べてみると、当初の意図よりも多くの場合（クラスなど）に警告していると思います。 それらのいくつかを黙らせることを検討します。

@JoviDeCroockこの例は、 urqlが何をするのかわからないため、あまり役に立ちません。 :-)パターンに関するフィードバックが必要な場合は、そのパターンを個別に示すサンドボックスを準備できますか？

@JoviDeCroockはい、 getCurrentValueは間違いなく副作用を意図したものではありませ

カスタムフックのルートスコープ内でreduxアクションをディスパッチすると、この警告が表示されるという問題がありました。

function useCustomHook() {
   const dispatch = useDispatch()
   const value = useSomeOtherHook()
   dispatch(action(value))
}

ディスパッチをuseEffectでラップすることで、これを修正しました。

@Glinkisそれは関係なく悪いパターンのように聞こえます。 コンポーネントがレンダリングされるたびにツリー全体に通知したいのはなぜですか？

@gaearonはい、私たちが解決しようとしていた問題は、ここでよりよく説明さ

@Glinkisそれは関係なく悪いパターンのように聞こえます。 コンポーネントがレンダリングされるたびにツリー全体に通知したいのはなぜですか？

reduxの状態をルートのIDと同期させる必要があるため、ルートが変更されたときにこの更新をディスパッチします。

これは最適ではない可能性があることはわかっていますが、セレクター内のルーティングデータにアクセスする他の方法は見つかりませんでした。

@Glinkisルートデータはどこから来ていますか？

@JoviDeCroockそのパターンに対する最新の推奨事項は、カスタムのスケジュールされたガベージコレクションパスだと思います。

@Glinkisルートデータはどこから来ていますか？

これが私に属するかどうかはわかりませんが、これは私のフックです。

export function useOpenFolder() {
  const dispatch = useDispatch()
  const match = useRouteMatch('/:workspace/(super|settings)?/:type?/:id?/(item)?/:item?')
  const { id, item } = match?.params || {}

  useEffect(() => {
    dispatch(
      openFolder({
        id: id || '',
        item: item || '',
      })
    )
  }, [dispatch, item, id])
}

後でこの状態を次のようなセレクターに使用します。

export const getActiveItem = createSelector(
  [getActiveFolderItem, getItems],
  (activeItem, items) => items.all[activeItem]
)

@Glinkisええ、ここでまとめましょう。しかし、私の提案は、親コンポーネントでuseRouteMatchを読み取り、IDを小道具として渡してから、通常どおりセレクターで小道具を読み取ることです。 （最近のReduxでこれがどのように行われるかは実際にはわかりませんが、何らかの方法があるはずです。）

なるほど、 UNSAFE_componentWillReceivePropsはレンダリングとしてカウントされますが、 componentDidUpdateはカウントされないということをこれから取り除きます。

@LabhanshAgrawalその通りです。 ここにいくつかの背景説明：

概念的には、Reactは2つのフェーズで機能します。

• レンダリングフェーズでは、DOMなどにどのような変更を加える必要があるかを決定します。 このフェーズでは、Reactはrenderを呼び出し、その結果を前のレンダリングと比較します。
• コミットフェーズは、Reactが変更を適用するときです。 （React DOMの場合、これはReactがDOMノードを挿入、更新、および削除するときです。）React componentDidUpdate 、このフェーズでcomponentDidMountやcomponentDidUpdateなどのライフサイクルも呼び出します。

コミットフェーズは通常非常に高速ですが、レンダリングが遅くなる可能性があります。 このため、次の並行モード（デフォルトではまだ有効になっていません）は、レンダリング作業を分割し、ブラウザーのブロックを回避するために作業を一時停止および再開します。 これは、Reactがコミットする前にレンダリングフェーズのライフサイクルを複数回呼び出す場合や、まったくコミットせずに呼び出す場合があることを意味します（エラーまたは優先度の高い中断のため）。

レンダリングフェーズのライフサイクルには、次のクラスコンポーネントメソッドが含まれます。

• constructor
• componentWillMount （またはUNSAFE_componentWillMount ）
• componentWillReceiveProps （またはUNSAFE_componentWillReceiveProps ）
• componentWillUpdate （またはUNSAFE_componentWillUpdate ）
• getDerivedStateFromProps
• shouldComponentUpdate
• render
• setStateアップデータ関数（最初の引数）

上記のメソッドは複数回呼び出される可能性があるため、副作用が含まれていないことが重要です。 このルールを無視すると、メモリリークや無効なアプリケーション状態など、さまざまな問題が発生する可能性があります。 残念ながら、これらの問題は非決定論的であることが多いため、これらの問題を検出するのは難しい場合があります。

さて、これを詳しく調べてみると、当初の意図よりも多くの場合（クラスなど）に警告していると思います。 それらのいくつかを黙らせることを検討します。

意図した以上のことだと思いますが、クラスを使ってプロジェクトを改善するのに役立つので、持っておくのは良いことだと思います。

この自明のエラーメッセージ「別のコンポーネントの関数本体の内部からコンポーネントを更新できません」

つまり、コンポーネントを呼び出すのではなく、関数として実行します。

このような例：

const App = () => {  
  const fetchRecords = () => { 
    return <div>Loading..</div>;
  };  
  return fetchRecords() // and not like <FetchRecords /> unless it is functional component.
};
export default App;

@rpateldあなたが示している例は、この警告に関連しているとは思いません。

https://github.com/facebook/react/pull/18330は、発砲を開始するつもりがなかったケースを解決し

react@experimental + react-redux + reduxでもこの問題に直面しています。

コードは次のようになります。

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
    resource.read()
    return <h1>cabinet</h1>
}

Cabinet.propTypes = {
    resource: PropTypes.shape({
        read: PropTypes.func
    })
}

const CabinetPage = ({
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet
}) => {
    if (tokensRefreshFailed || failedToLoad) {
        clearTokens()
        clearCabinet()
        logout()
        return <Redirect to='/login' />
    }

    return (
        <Suspense fallback={<CircularProgress />}>
            <Cabinet resource={loadCabinet()} />
        </Suspense>
    )
}

CabinetPage.propTypes = {
    loadCabinet: PropTypes.func,
    failedToLoad: PropTypes.bool,
    tokensRefreshFailed: PropTypes.bool,
    logout: PropTypes.func,
    clearTokens: PropTypes.func,
    clearCabinet: PropTypes.func
}

const mapStateToProps = ({
    alert,
    tokens: { tokensRefreshFailed },
    cabinet: { failedToLoad }
}) => ({
    alert,
    tokensRefreshFailed,
    failedToLoad
})

const mapDispatchToProps = dispatch =>
    bindActionCreators(
        {
            cabinetLoad: cabinetActions.load,
            logout: userActions.logoutWithoutRedirect,
            loadCabinet: api.loadCabinet,
            clearCabinet: cabinetActions.clear,
            clearTokens: tokensActions.clear
        },
        dispatch
    )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet()は、同時ドキュメントが言うように、3フェーズレンダリングの非同期アクションをディスパッチし、 read() propを使用してオブジェクトを返します。
ただし、ここでは親の更新を確認できません。

@ h0tw4t3rコンポーネントのレンダリング中にReduxアクションをディスパッチしています。 これはサポートされていません、そしてそれは警告が何であるかについてです。 このケース（リダイレクト）を適切に処理する方法についてReact Routerの専門家に尋ねるのが最善ですが、その部分については役に立ちません。

並行モードに関しては、Reduxは現在一般的に互換性がないことに注意してください。 したがって、CMを試している場合は、これを避けたいと思うかもしれません。

このスレッドの小さな更新

クラスに対するこの警告の過剰発火を修正するReactのパッチをまもなくリリースする予定です。 したがって、これが発生した場合は、数日待ってから、16.13.1がリリースされたら試してみることを検討してください。

原因を探し続けたい場合は、 https： //github.com/facebook/react/issues/18178#issuecomment-595846312でその方法を説明して

クラスコンポーネントで使用されたときに同じロジックが機能（フック）が警告を発するのに警告を発しないのは非常に奇妙だと思います。

機能コンポーネント（フック）：

import React, { Component } from "react"
import SortableTree from "react-sortable-tree"
import "react-sortable-tree/style.css"

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
]

const nodeInfo = row => console.log(row)

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    }
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1))

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      })

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      })

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault()
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              }
            }}
          />
        </div>
      </div>
    )
  }
}

クラスコンポーネント：

import React from "react";
import SortableTree from "react-sortable-tree";
import "react-sortable-tree/style.css";

const data = [
  {
    title: "Windows 10",
    subtitle: "running",
    children: [
      {
        title: "Ubuntu 12",
        subtitle: "halted",
        children: [
          {
            title: "Debian",
            subtitle: "gone"
          }
        ]
      },
      {
        title: "Centos 8",
        subtitle: "hardening"
      },
      {
        title: "Suse",
        subtitle: "license"
      }
    ]
  }
];

const nodeInfo = row => console.log(row);

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchString: "",
      searchFocusIndex: 0,
      searchFoundCount: null,
      treeData: data
    };
  }

  render() {
    const { searchString, searchFocusIndex, searchFoundCount } = this.state;

    const customSearchMethod = ({ node, searchQuery }) =>
      searchQuery &&
      ((node.title &&
        node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1) ||
        (node.subtitle &&
          node.subtitle.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1));

    const selectPrevMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
            : searchFoundCount - 1
      });

    const selectNextMatch = () =>
      this.setState({
        searchFocusIndex:
          searchFocusIndex !== null
            ? (searchFocusIndex + 1) % searchFoundCount
            : 0
      });

    return (
      <div>
        <h2>Find the needle!</h2>
        <form
          style={{ display: "inline-block" }}
          onSubmit={event => {
            event.preventDefault();
          }}
        >
          <input
            id="find-box"
            type="text"
            placeholder="Search..."
            style={{ fontSize: "1rem" }}
            value={searchString}
            onChange={event =>
              this.setState({ searchString: event.target.value })
            }
          />
          &nbsp;
          <button
            type="button"
            disabled={!searchFoundCount}
            onClick={selectPrevMatch}
          >
            &lt;
          </button>
          &nbsp;
          <button
            type="submit"
            disabled={!searchFoundCount}
            onClick={selectNextMatch}
          >
            &gt;
          </button>
          &nbsp;
          <span>
            &nbsp;
            {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
            &nbsp;/&nbsp;
            {searchFoundCount || 0}
          </span>
        </form>

        <div style={{ height: 300 }}>
          <SortableTree
            treeData={this.state.treeData}
            onChange={treeData => this.setState({ treeData })}
            searchMethod={customSearchMethod}
            searchQuery={searchString}
            searchFocusOffset={searchFocusIndex}
            searchFinishCallback={matches =>
              this.setState({
                searchFoundCount: matches.length,
                searchFocusIndex:
                  matches.length > 0 ? searchFocusIndex % matches.length : 0
              })
            }
            generateNodeProps={row => {
              return {
                title: row.node.title,
                subtitle: (
                  <div style={{ lineHeight: "2em" }}>{row.node.subtitle}</div>
                ),
                buttons: [
                  <button
                    type="button"
                    className="btn btn-outline-success"
                    style={{
                      verticalAlign: "middle"
                    }}
                    onClick={() => nodeInfo(row)}
                  >
                    ℹ
                  </button>
                ]
              };
            }}
          />
        </div>
      </div>
    );
  }
}

@radulleこれ自体はあまり役に立ちません。 CodeSandboxに入れてみましたが、機能しません： https ：//codesandbox.io/s/clever-taussig-9xixs

@gaearonコードサンドボックスを作成したかったのですが、最新バージョンのライブラリにはいくつかの問題があります。 古いバージョンではエラーはスローされません。 現時点では、それを再現する唯一の方法は、ローカルでCreate ReactAppでスピンアップすることだと思われます:(

@radulle CodeSandboxで機能するバージョンを試すことができますか？

@gaearon 2.6.2は機能し、次の設定でエラー/警告をスローします。

したがって、同じ設定の場合：
機能コンポーネント：エラー/警告
クラスコンポーネント：エラー/警告なし
多分私は何かを逃していて、それらは同等ではありません。

ええ、これは私がhttps://github.com/facebook/react/issues/18178#issuecomment-600369392で参照したケースの1つです。 この場合、警告をミュートします。 警告自体は正当であり、あなたが正しく言うように、概念的にはクラスでも問題です。 ただし、この不一致は意味をなさないため、クラス（この例では）からのものである場合は、今のところ両方の場合でミュートします。

エフェクトからではなく、レンダー関数から状態の更新を起動する正当なユースケースがあると思います。それは、実行順序を維持することです。

実用的な例で説明すると、私たちのアプリには、パンくずリストを管理するための独自のシステムがあります。

• 私たちはすべてのパンくずリストを保持するグローバルなコンテキストを持っています

• 次のように、このコンテキストにブレッドクラムを追加できるフックがあります。

  const addBreadcrumb = useAddBreadcrumb();
  addBreadcrumb(<Breadcrumb>{item.name}</Breadcrumb>, [item.name]);
  

• コンテキストから情報を読み取り、すべてのブレッドクラムをレンダリングするコンポーネントがあります。 したがって、ブレッドクラムをレンダリングするときはいつでも、パラメータなしで呼び出す必要があります。

ブレッドクラム構造を維持する必要がないため、これは非常に実用的です。この構造はコード自体で宣言されています。 ルートをアプリケーションの別の部分に移動したい場合、ブレッドクラムシステムは機能し続けます。

したがって、 react-routerと組み合わせると、次のようなことができます。

// Main/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Home from './Home';
import Movies from './Movies';

const Main = () => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to="/">Home</Breadcrumb>, []);

    return <Switch>
        <Route path="/movies">
            <Movies />
        </Route>
        <Route path="/" />
            <Home />
        </Route>
    </Switch>
}

// Movies/index.tsx
import { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import Detail from './Detail';
import Master from './Master';

const Movies = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    addBreadcrumb(<Breadcrumb to={url}>Movies</Breadcrumb>, [url]);

    return <Switch>
        <Route path="/:id">
            <Detail />
        </Route>
        <Route path="/" />
            <Master />
        </Route>
    </Switch>
}

// Movies/Detail/index.tsx
import Breadcrumbs, { useAddBreadcrumb } from 'components/Breadcrumbs';
import React from 'react';
import { useRouteMatch } from 'react-router-dom';

const MovieDetail = ({ url }) => {
    const addBreadcrumb = useAddBreadcrumb();
    const { params: { id } } = useRouteMatch<{ id: string; }>();
    const movie = useMovie(id);

    addBreadcrumb(
        <Breadcrumb to={url}>{movie?.name}</Breadcrumb>,
        [movie?.name, url]
    );

    return <div>
        <Breadcrumbs />
    </div>
}

ここで、 /movies/gone-with-the-windと、ブレッドクラムは次のようになります。

Home > Movies > Gone with the wind

さて、これが私のポイントです。それが機能するためには、実行順序が保証されている必要があります。 この場合、実行順序は明らかです。最初にMainレンダリングされ、次にMovies含む子がレンダリングされ、最後にMovieDetailレンダリングされます。 この場合、 addBreadcrumb呼び出しは正しい順序で実行されます。

現在、変更ログには次のように記載されています。

レンダリングの結果として意図的に別のコンポーネントの状態を変更したいというまれなケースでは、setState呼び出しをuseEffectにラップすることができます。

これは確かに、別のコンポーネントの状態を意図的に変更したいというまれなケースの1つです。 ただし、変更ログが提案し、 addBreadcrumb （最終的には栄光のsetState ）をuseEffectにラップすると、実行順序は保証されなくなります。 3つのsetStatesはすべて、レンダリングが終了した後に実行されます。これにより、競合状態が発生し、システムが破損します。

この独特のシステムがアンチパターンと見なされるかどうかはわかりませんが、私にはそれが理にかなっており、より単純な代替手段は見つかりませんでした。

結論として、私はこの新しい警告を歓迎しますが、私たちにとって最適な解決策はそれを抑制する方法があると思います。 たぶん、 setStateへの2番目のオプションのパラメータでうまくいくでしょう。

@MeLlamoPablo

兄弟または親/子のレンダリング順序のレンダリング呼び出しに依存することは、非常に脆弱に聞こえます。 Reactは実際にこれを保証するものではありません。 子供は両親なしで再レンダリングすることができます（そしてそうするでしょう）、そしてその逆も同様です。 子が遅延してレンダリングされる場合（コード分割など）、このコードも壊れます。 または、一部の子が動的に挿入または削除された場合。 言うまでもなく、カスケードレンダリングが非常に多いため、これはパフォーマンスの面でかなり悪い結果になります。

私はあなたが解決しようとしている問題に共感します—実際、今日のReactには慣用的な解決策がありません。 私たちはそれについていくつかのアイデアを持っていますが、適切な解決策はかなり異なる必要があります。 当面の間、この回避策はお勧めしません。

@gaearon 、あなたの洞察に感謝します。 質問が1つあります。最初のレンダリングの順序は保証されていますか？ 適切に機能するために必要なのはこれだけなので（ブレッドクラムの順序がわかれば、後続のレンダリングの順序は気になりません）。

最初のレンダリングの順序が保証されていることは私には論理的に思えます。 Reactは、親コンポーネントに子が存在することをどのようにして知るのでしょうか。

カスケードレンダリングのパフォーマンスについては、あなたは絶対に正しいです。 システムを改善する方法を探します。

@MeLlamoPablo

質問が1つあります。最初のレンダリングの順序は保証されていますか？ 適切に機能するために必要なのはこれだけなので（ブレッドクラムの順序がわかれば、後続のレンダリングの順序は気になりません）。

強くはない。 ほとんどの場合、現在のバージョンのReactで機能すると思いますが、将来的には変更される可能性があります。 今日でも、 lazyやSuspenseなどの機能と組み合わせると保証されません。

Reactは、親コンポーネントに子が存在することをどのようにして知るのでしょうか。

兄弟の順序は保証されません。 親/子の順序については、親が最初にレンダリングする必要があるのは正しいです。 ただし、Reactは、子に到達する前、または最初の子をレンダリングした後、2番目の子の

これは壊れやすいです。

@gaearon 、ありがとう。 これは非常にありがたいです。

おそらく、レンダーボディ内でuseStateミューテーターを呼び出さないように警告するESLintルールがあるはずですか？

レンダリング中に独自のコンポーネントのsetStateを呼び出すことは、サポートされているパターンです（ただし、慎重に使用する必要があります）。 悪い他のコンポーネントのsetStateです。 それらを静的に検出することはできません。

理論的には、ts-eslintを使用して、正しいアップストリームReactタイプを使用していると仮定して実行できますが、おそらく、その価値よりも多くの労力が必要です。

なんらかの効果追跡なしでは実現できないと思います。 途中に1つの機能があるとすぐに、情報が失われます。

react@experimental + react-redux + reduxでもこの問題に直面しています。

コードは次のようになります。

import React, { Suspense } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import PropTypes from 'prop-types'
import { userActions, cabinetActions, tokensActions } from '../../actions'
import { CircularProgress } from '@material-ui/core'
import { api } from './api'

const Cabinet = ({ resource }) => {
  resource.read()
  return <h1>cabinet</h1>
}

Cabinet.propTypes = {
  resource: PropTypes.shape({
      read: PropTypes.func
  })
}

const CabinetPage = ({
  failedToLoad,
  tokensRefreshFailed,
  logout,
  loadCabinet,
  clearTokens,
  clearCabinet
}) => {
  if (tokensRefreshFailed || failedToLoad) {
      clearTokens()
      clearCabinet()
      logout()
      return <Redirect to='/login' />
  }

  return (
      <Suspense fallback={<CircularProgress />}>
          <Cabinet resource={loadCabinet()} />
      </Suspense>
  )
}

CabinetPage.propTypes = {
  loadCabinet: PropTypes.func,
  failedToLoad: PropTypes.bool,
  tokensRefreshFailed: PropTypes.bool,
  logout: PropTypes.func,
  clearTokens: PropTypes.func,
  clearCabinet: PropTypes.func
}

const mapStateToProps = ({
  alert,
  tokens: { tokensRefreshFailed },
  cabinet: { failedToLoad }
}) => ({
  alert,
  tokensRefreshFailed,
  failedToLoad
})

const mapDispatchToProps = dispatch =>
  bindActionCreators(
      {
          cabinetLoad: cabinetActions.load,
          logout: userActions.logoutWithoutRedirect,
          loadCabinet: api.loadCabinet,
          clearCabinet: cabinetActions.clear,
          clearTokens: tokensActions.clear
      },
      dispatch
  )

export default connect(mapStateToProps, mapDispatchToProps)(CabinetPage)

loadCabinet()は、同時ドキュメントが言うように、3フェーズレンダリングの非同期アクションをディスパッチし、 read() propを使用してオブジェクトを返します。
ただし、ここでは親の更新を確認できません。

この問題を抱えている他の人のために、返されたコンポーネントにreduxアクションディスパッチを移動することで修正しました。 現在の様子は次のとおりです。

const CabinetPage = ({
    alert,
    failedToLoad,
    tokensRefreshFailed,
    logout,
    loadCabinet,
    clearTokens,
    clearCabinet,
    clearAlert
}) => (
    <Suspense fallback={<MUIBackdropProgress />}>
        {alert.message && (failedToLoad || tokensRefreshFailed) ? (
            <MUIAlertDialog
                title={alert.message}
                text={errorText}
                onClose={() => {
                    clearAlert()
                    clearCabinet()
                    clearTokens()
                    logout()
                }}
            />
        ) : (
            <Cabinet resource={loadCabinet()} />
        )}
    </Suspense>
)

正しいデザインパターンを選択する必要があるため、この警告が気に入っています。 今ではすべてが完璧に機能します！

16.13.1で警告が過剰に発生するケースを修正しました。 残りのケースは正当であり、修正する必要があります。

@gaearonがアップグレードされ、エラーが消えました！ 皆さん、ありがとうございました！

@gaearonありがとう。 あなたは私の日を救った:-)

アップグレードしても問題は解決しませんでしたが、問題を見つけるのに役立つ情報がコンソールに表示されました。 ありがとう@gaearon ！

他のコンポーネントが前回と同じ状態を返すようにするアクションをディスパッチするとどうなりますか？ それは悪いと考えられていますか？ その場合は短絡すると思います。

私は完全にこの警告の背後にあるロジックを理解しながら、私はこのことを言うことができる...それはほとんどのチームがコードにどの程度これらの重要な真理を教えているようにそれは感じているので、チームがコミュニティを語ってきたリアクト何の裏切りのように感じています反応：

1）階層内で必要なだけ高い状態（それ以上ではない）を維持してから、データとセッターを子コンポーネントに渡します

2）関数コンポーネントは素晴らしいです！ そのクラスのノイズを忘れて、コンポーネント全体を1つの関数で実行してください！

そして今、人々がこれらの2つのルールに従い、状態セッターを関数コンポーネントに渡し、それらをそれらのコンポーネントで呼び出すと、ラグを引き出して「ハ」と言いますが、実際には私たちが言ったことを実行することはできません。やること」。

これは、ここでの技術的ニーズについては何も変更しません。この変更について何も間違っている、または悪いと言っているわけではありません...メッセージングの問題があると感じています。つまり、2つのような明確なルールを伝達していないということです。この新しい世界でのコーディングについては、先ほど触れました）。 ルールを変更する場合は、最初にベストプラクティスを説明することで変更すると役立つと思います。

ですから、私が本当に求めているのは...チームの誰かが（記事のように）何かを書くとしたら、もっと理想的だと思います。新しいルール」をクリックし、この新しい警告を参照するドキュメント/リリースノートのすべての場所にその記事へのリンクを追加します（したがって、「WTFはこれですか？」をグーグルで検索するすべての人が、「新しいルール」でReactをコーディングする適切な方法を学ぶことができます世界"）。

@machineghost ：メッセージが何について警告しているのか誤解していると思います。

親の状態を更新するコールバックを子に渡すことには何の問題もありません。 それはいつも大丈夫です。

問題は、あるコンポーネントが別のコンポーネントの更新をキューに入れているときに、_最初のコンポーネントがレンダリングされている間_です。

言い換えれば、これを行わないでください：

function SomeChildComponent(props) {
    props.updateSomething();
    return <div />
}

しかし、これは問題ありません。

function SomeChildComponent(props) {
    // or make a callback click handler and call it in there
    return <button onClick={props.updateSomething}>Click Me</button>
}

また、Danが何度も指摘しているように、レンダリング中に_same_コンポーネントの更新をキューに入れることも問題ありません。

function SomeChildComponent(props) {
  const [number, setNumber] = useState(0);

  if(props.someValue > 10 && number < 5) {
    // queue an update while rendering, equivalent to getDerivedStateFromProps
    setNumber(42);
  }

  return <div>{number}</div>
}

そうですが、コンポーネントをコーディングしているときは、その親のタイミングについては考えていません。 これは、Reactコンポーネントの美しさの一部であるカプセル化です。

繰り返しになりますが、新しい警告がまったく悪いと言っているのではありません。良いReact開発者が従うことができる2つのルールができる前に言っています。 Xの条件下では、これらのルールはウィンドウの外に出ますが、Xの下でのみです（X =「親コンポーネントも更新中」のように聞こえます）。

「これは今問題だ！」というだけでなく、それを説明し、問題を回避する方法にもっと焦点を当てる必要があると思います。

@machineghost ：あなたは私がここで言っていることを_本当に_得ていません。

親子のタイミングは問題ではありません。

関数componentのレンダリング中に他のコンポーネントの状態更新をキューに入れることが問題です。

定義上、それは親/子（または孫）でなければなりません：他にどのようにして状態設定者を引き継ぐことができたでしょうか？

これが他のコンポーネントの関係でも問題になることはないと言っているわけではありませんが、Reactのベストプラクティスに従い、状態設定者を引き継いで、この警告を受け取る人々について具体的に話します。

私が話しているのはそれだけであり、私が言っているのは、「これが新しいエラーであり、それが何を意味するのか」というだけでなく、うまくコーディングする方法に焦点を当てることで、よりよく説明できるということです。

タイミング。 いいえ。 問題。

関数コンポーネントは、レンダリング中に、それ自体に対してのみ状態更新をキューに入れることができます。 私の例が示したように、それはgetDerivedStateFromPropsと同等に機能します。

関数コンポーネントの実際のレンダリング本体内から他のコンポーネントの更新をキューに入れることは違法です。

それがこの警告があなたに伝えていることです。

それをもっと明確に説明する方法がわかりません。

タイミングは問題ではありません：あなたのものではなく、私のものでもありません。 私の問題はドキュメント、またはその欠如です。

しかし、あなたは彼らが言っていることに耳を傾けるのではなく、インターネットの見知らぬ人との問題スレッドで戦争を始めることに決めました...私はあなたと関わり続けることを望んでいません。

重要なのは、ルールが変更されていないということです。 これは常に間違ったパターンでした。 コードにバグがあることに気付くように、ハイライト表示されています。

そして、文字通り、あなたが今言ったことは、私が書いたものと矛盾するものは何もありません。 実際、それは私が最初からまったく同じことを言ったようです...そして私がこれまでずっと求めたのはそれらの同じルールのより良い説明でした、あなたが言うものは変わっていません（そしてもちろん彼らはしていません...何が変わって「新しい世界を作った」のかが警告でした）。

PSあなたもここで皮肉に気づいていないようです。 私が何も理解できない場合、それはドキュメントが改善される可能性があるということです。 私が物事をどれほどよく理解していないかについて私に怒鳴ることは、私の立場を強めるだけです。 ドキュメントを魔法のように改善することはありません。

こんにちは皆さん、少しクールダウンしましょう。 🙂

@markerikson参加していただきありがとうございますが、この議論は少し熱くなりすぎていると思います。

@machineghost懸念を表明していただきありがとうございます。 以前は無害に見えたかもしれないパターンに対して新しい警告がポップアップするのは迷惑だと私は知っています。

この警告には事前のコンテキストが必要であることに同意します。 基本的に、クラスの時代から2つのことを知る必要がありました。

• レンダリング中にSetStateを使用しないでください。 クラスは常にこれについて警告しました。

• その関数コンポーネント本体は、基本的にクラスコンポーネントのrenderメソッドと同じものです。

関数コンポーネント本体の間に別のコンポーネントのsetStateが以前に警告しなかったのは、確かに私たちの省略です。 上記の2つのポイントから悪いパターンであると推測できます

ドキュメント内でこれについて言及する必要がある特定の場所があると思われる場合は、ドキュメントリポジトリで問題を提起してください。 フックに基づいてドキュメントを書き直すことを計画しているので、それを覚えておくことができます。 ありがとう！

私は決して誰かに何かについて気分を害させるつもりはありません、そして私はあなたの謝罪を受け入れることを拒否します;）フックは天才であり、そしてあなたはそれらを発明するための天才です。 そして、すべての結果を完全に想像していなかったために別のエンジニアを責めるエンジニアは誰でも...ジャークです。

私が伝えようとしてきたのは、現在、この警告を受け取ったとき、私はみんながしていることをしました：私はそれをグーグルで検索しました。 次に、「この新しい警告があります」というページを見つけました。

そのアナウンス、または誰かがグーグルで見つけるかもしれない同様の場所に、「ここにあるなぜこのエラーが発生したのか、そしてこれがあなたが素晴らしいReact開発者になり、自分で遭遇しないようにいくつかの基本的なガイドラインに従う方法です。」

しかし、繰り返しになりますが、フックは素晴らしく、Reactチームは素晴らしく、この新しい警告でさえ素晴らしくなります（防御しようとしているエラーを発見することで、それは地獄を打ち負かすと確信しています）。 誰かが誰かに謝罪する義務があるなら、それを先導しなかったのは私です。

確かに、難しい感情はありません。 「理由」の答えは、「レンダリング中に1つのコンポーネントが他のコンポーネントの更新をトリガーすると、アプリのデータフローがトップダウンでなくなるため、追跡が非常に困難になる」よりも複雑ではありません。 したがって、そうすると、Reactのメリットを捨ててしまうことになります。

繰り返しますが、明確にするために、これ自体は新しいものではありません。クラスには常に同じ警告がありました。 私たちはフックでそれを見逃し、間違いを修正しています。 修正方法はケースによって異なると思いますが、正確な手順を説明することはできませんが、苦労している例を共有していただければ幸いです。 一般的に言って、常に存在していた対応するクラスの警告を修正するのと同じ方法で修正します。

それがいくらか役立つことを願っています！

私はこの議論に私の2セントを追加し、機能コンポーネントとフックの導入以来多くの混乱があったという@machineghostに同意します。 コミュニティはリーダーシップを求めてリアクションチームを探していますが、以前は単純だったものが複雑になり、コミュニケーションと明確な例が不足しているようです。

ケースとポイントはComponentDidMountとUnmountであり、最初に関数コンポーネントを使用するように指示され、次に空の配列でuseEffectを使用するように指示され、次にそれは良くないと言われ、今ではこのエラーメッセージが混乱しています。 わかりません。すべてのハードワークが反応することに感謝していますが、ドキュメントとベストプラクティスにもっと力を入れる必要があります。

私は長い間関数の時流に乗っているので（フックの前でもRecomposeなどのクラスを避けようとしています）、それらのクラスの警告すら覚えていません。

そして、あなたの回答に感謝しますが、私は主に「経験則」、ガイドライン、ベストプラクティスなどを望んでいました。 "または"制御パターンの反転を使用して状態セッターを子コンポーネントに渡します "。

ここには何もないかもしれませんが、「機能コンポーネントAが状態を変更した場合、状態セッターを渡す子コンポーネントBをレンダリングするべきではありません（すぐに戻る必要があります）。子コンポーネントは、問題が発生する状態をレンダリングおよび変更します。」

あるいは、日曜日の遅い時間に、私は一日中個人的なプロジェクトに取り組んでいて、私の脳はあまりにも揚げすぎて、単純なものを難しいものに変えています。 いずれにせよ、ガイドラインについてさらに提案があれば投稿しますが、それ以外の場合は、他の誰かが日曜日の夜をこれに費やしたくないことは確かです。

でもありがとう！

このスレッドがその有用性を超えたところまで来ていると思います。

ケースとポイントはComponentDidMountとUnmountであり、最初に関数コンポーネントを使用するように指示され、次に空の配列でuseEffectを使用するように指示され、次にそれは良くないと言われ、今ではこのエラーメッセージが混乱しています。

私たちのドキュメントが役に立たなかったことをお詫びしますが、あなたが遭遇した特定の問題を言うのは非常に難しいです。 これは残念ながら非常に曖昧であり、私たちが言おうとしたことのゆがみです。 壊れた電話のゲームのように。 特定の問題がある場合は、新しい問題を提出して、より詳細に説明してください。 あなたがより具体的にすることができるならば、我々はあなたを助けるように努めます。

そして、あなたの回答に感謝しますが、私は主に「経験則」、ガイドライン、ベストプラクティスなどを望んでいました。

経験則は常に「レンダリング中に副作用を実行しない」でした。 レンダリングを純粋な計算と考えてください。 副作用は別の場所に発生します（クラスのライフサイクルメソッド、または関数コンポーネントのuseEffect）。 それ以上のものはありません。

「機能コンポーネントAが状態を変更した場合、状態セッターを渡す子コンポーネントBをレンダリングしないでください（すぐに戻る必要があります）。子コンポーネントがレンダリングして状態を変更すると、問題が発生するためです。」

ここにはまだ誤解があると思います。 状態セッターを子コンポーネントに渡すことはまったく問題ありません。 いつも元気で、これからもそうなるでしょう。

問題は、レンダリング中にそれらを呼び出すことです。 それは一般的に完全に不要なはずです。 具体的な例がなければ、なぜそうしているのか推測するのは難しいです。 ですから、助けるのは難しいです。

これらの会話の両方の一般的なテーマは、私たちが輪になって行くということです。 議論はメタに切り替わり、特定のケースについて話す代わりに、漠然とした一般性について議論しています。 私たちはお互いを誤解している可能性がありますが、具体的な例がないため、この誤解を解決することは不可能です。

このため、このスレッドをロックします。 ここでの皆さんのご意見に感謝します。この警告を修正するのに苦労している場合は、ぜひご意見をお聞かせください。 ヘルプを得る方法は、最小限の再現例で問題を提出することです。 次に、具体的な問題について話し合い、解決策のブレインストーミングを支援します。 これにより、関係するすべての人にとってより生産的になり、このスレッドにすでにコメントして購読することになった何十人もの人々に電子メールを送信することも回避されます。 ありがとうございました！

小さな更新として（全員にpingを送信して申し訳ありません）、 https： //github.com/final-form/react-final-form/issues/751#issuecomment-606212893がそれを使用していた人々のこれらのエラーの束を解決したと聞きました図書館。