Обновление состояния в componentDidUpdate вызывает бесконечный цикл

Question

Я красный около getDerivedStateFromProps, но кажется, что это не то, что мне нужно. Я выполняю приведенный выше код, и возникает бесконечное число l oop. Как я могу предотвратить это? Необходимо обновлять вопросы викторины при каждом обновлении. Код:

async componentDidUpdate() {
    await this.questions();
  }

  questions = async () => {
    const questions = await Promise.all(
      this.props.navigation.getParam("quizzes").subQuiz.map(async (quiz) => {
        const quizQuestions = await firebase
          .firestore()
          .collection("questions")
          .where("quizId", "==", quiz.uid)
          .get();

        return quizQuestions.docs.map((quizQ) => {
          return { uid: quizQ.id, ...quizQ.data() };
        });
      })
    );

    const quizzes = this.props.navigation.getParam("quizzes").subQuiz;
    let final = [];
    for (let i = 0; i < quizzes.length; i++) {
      const quiz = quizzes[i];
      const quizQuestions = questions[i];
      final.push([
        {
          quiz: {
            ...quiz,
            quizQuestions: {
              ...quizQuestions,
            },
          },
        },
      ]);
    }

    this.setState({ quizzes: final }, () => {
      console.log("TUKASME", this.state.quizzes[0].quiz);
    });
  };

Благодарю за каждый совет! Реак-

Answer 1

Обновление может потребоваться только в том случае, если props.navigation.getParams('quizzes') отличается от последнего обновления. Один из способов сделать это - сохранить параметр quizzes в переменной экземпляра:

componentDidUpdate() {
  const currentParam = this.props.navigation.getParam("quizzes");
  if (currentParam !== this.lastQuizzes) {
    this.lastQuizzes = currentParam;
    this.questions();
  }
}

Если вы амбициозны и хотите преобразовать шаблон функциональных компонентов с помощью хуков, они получат гораздо более простой метод условного обновления с использованием useEffect:

import { useEffect, useState } from 'react';

function MyComponent({ navigation }) {
  const [state, setState] = useState();
  const quizzesParam = navigation.getParam('quizzes');
  useEffect(() => {
    updateQuizzes();
  }, [quizzesParam]);

  async function updateQuizzes() {
    const questions = await Promise.all(
      quizzesParam.subQuiz.map(async (quiz) => {
        const quizQuestions = await firebase
          .firestore()
          .collection("questions")
          .where("quizId", "==", quiz.uid)
          .get();

        return quizQuestions.docs.map((quizQ) => {
          return { uid: quizQ.id, ...quizQ.data() };
        });
      })
    );

    const quizzes = quizzesParam.subQuiz;
    let final = [];
    for (let i = 0; i < quizzes.length; i++) {
      const quiz = quizzes[i];
      const quizQuestions = questions[i];
      final.push([
        {
          quiz: {
            ...quiz,
            quizQuestions: {
              ...quizQuestions,
            },
          },
        },
      ]);
    }

    setState({ ...state, quizzes: final });
  }

  // Render...
}

С этим шаблоном эффект срабатывает только при первоначальном монтировании или при изменении значений в массиве.