レンダリング中の不正な setState() 呼び出しと考えられる解決策!

警告: 別のコンポーネント (BookingconfirmationModal) をレンダリングしている間は、コンポーネント (Bookings) を更新できません。 BookingconfirmationModal 内の不正な setState() 呼び出しを見つけるには、説明に従ってスタック トレースに従います。

React アプリケーションでは、この恐ろしいエラーが頻繁に発生します。このエラーは、ほとんどが親コンポーネントであるコンポーネント (Bookings) の状態を変更しようとしたときに、そのコンポーネントが子コンポーネントである別のコンポーネント (BookingconfirmationModal) をレンダリング中に、おそらく setState() 関数を渡しているときに発生します。それを小道具として。ただし、これにより、アプリケーションの UI で予期しない動作や不整合が発生する可能性があります。

このブログでは、このエラーを理解し、そのソースをデバッグし、React プロジェクトで再びエラーが発生するのを防ぐための効果的な解決策を実装する方法を説明します。

エラーを理解する

React のレンダリング プロセスは、効率的かつ予測可能になるように設計されています。コンポーネントの状態やプロパティが変更されると、React は再レンダリング プロセスを開始します。このプロセス中、React はコンポーネント ツリーを走査し、必要に応じてコンポーネントを更新および再レンダリングします。「レンダリング中に状態を更新できません」エラーの中心的な問題は、この予測可能なレンダリング順序の違反にあります。コンポーネントが自身のレンダリング段階で別のコンポーネントの状態を変更しようとすると、レンダリング サイクルが中断され、次のような事態が発生する可能性があります。

• 無限ループ: 状態の更新により継続的な再レンダリングがトリガーされ、アプリケーションがクラッシュする可能性があります。
• 一貫性のない UI: UI は、意図した状態の変更を正確に反映していない可能性があります。
• データ競合: 複数のコンポーネントが同じ状態を同時に変更しようとし、予測不可能な結果につながる可能性があります。

考えられる原因

• レンダリング フェーズでの状態更新: 最も可能性の高い原因は、レンダリング メソッド内または BookingconfirmationModal のレンダリング プロセス中に setState を呼び出していることです。

• レンダリングの副作用: レンダリング メソッドで直接副作用 (データのフェッチや状態の更新など) を実行している可能性がありますが、これは避けるべきです。

解決

この問題を解決するには、レンダリング段階で状態の更新が発生しないようにする必要があります。実行できる手順は次のとおりです:

• 状態の更新を useEffect に移動: 何らかの条件に基づいて状態を更新する必要がある場合は、コンポーネントのレンダリング後に useEffect フックを使用して更新を実行します。

import React, { useEffect } from 'react';

const BookingConfirmationModal = ({ someProp }) => {
  useEffect(() => {
    // Perform state updates here
    // Example: setState(someValue);
  }, [someProp]); // Add dependencies if needed

  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
};

• レンダリングでの直接の状態更新を避ける: レンダリング メソッド内、またはレンダリング中に呼び出される関数内で setState を直接呼び出していないことを確認してください。

• 条件付き状態の更新を確認します: 状態を更新する条件付きロジックがある場合は、それがレンダリング フェーズ中に実行されていないことを確認してください。

• useMemo を確認してください: 場合に useMemo を使用している場合は、それを削除し、代わりに子コンポーネントで useEffect を使用して実行できるようにします。コンポーネントがマウントされたら、useMemo を親コンポーネントに移動します。これで警告は解決します。

考えられる解決策は次のようになります -

import { useState, useEffect } from "react";
import BookingConfirmationModal from "./BookingConfirmationModal";

function App() {
  const [showModal, setShowModal] = useState(false);
  // other code

  return (
    <div>
      <h1>This is app</h1>
      <button onClick={() => setShowModal(true)}>Show Modal</button>
      {showModal ? <Testing BookingConfirmationModal={setTestingState} /> : null}
    </div>
  );
}

export default App;

// BookingConfirmationModal.jsx
const BookingConfirmationModal= ({ setTestingState }) => {

  useEffect(()=> {
    setTestingState(false)
   }, [setIsModalVisible]) //or other required dependencies

  return (
    <div>
      <button onClick={() => setTestingState(false)}>Close Modal</button>
      // other codes
    </div>
  );
};

export default BookingConfirmationModal;

コーディングを楽しんでください!

提案をしたい:-

Linkedin Twitter で私を見つけてください

labib.ahmed.372@gmail.com までメールしてください

以上がレンダリング中の不正な setState() 呼び出しと考えられる解決策!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。