Могу ли я добавить асинхронную функцию в функциональный компонент React

Question

Обратите внимание, что вопрос НЕ об асинхронном характере использованияState. Это Асинхронный , и на него хорошо ответили: Метод использования useState, не отражающий изменения немедленно Пожалуйста, не путайте это с этим! Я использовал useEffect, чтобы заставить кнопку работать, как сообщается в codepen

Мой вопрос: могу ли я добавить / включить какую-либо асинхронную функцию в основной компонент? Основной компонент: HelloWorld Подфункция: InterestShown => Может ли это быть асинхронным? в примере я максимально упростил это с выводом console.log.

Это рекомендуемый маршрут или я пытаюсь что-то странное?

Я пытался найти решение этой проблемы, но я думаю, что все ответы были направлены на занятия, и я надеюсь, что это будет сделано в React Functional Component, если это возможно.

Я определил состояние следующим образом: const [interested, setInterested] = React.useState(false)

, когда я вызываю эту функцию:

function interestShown() {
      console.log("Before Set State fired", interested)
      setInterested(!interested)
      console.log("After Set State Fired", interested)
    }

Журнал консоли после изменения состояния должен показывать измененное состояние, Я не мог получить это, я попробовал много вариантов

Моя проблема здесь в этом коде пера: https://codepen.io/deepeshkr/pen/PowQWwv

Вывод журнала консоли:

pen. js: 6 до установки состояния State false

pen. js: 8 после установки состояния F false false => это должно быть верно, но я предполагаю это асинхронное изменение, это мой вопрос, как запустить это после изменения состояния?

pen. js: 14 Fire only true, true true

Есть похожие вопросы, но я не уверен, что они задают то же самое, что я задаю, или вопрос хорошо объяснен, чтобы продемонстрировать проблему.

Answer 1

Да, это асинхронный . Таким образом, вы не увидите изменения немедленно.

Из документации setState():

Функция setState() используется для обновления состояния. Он принимает новое значение состояния и ставит в очередь повторную визуализацию компонента.

Вы можете использовать useEffect() ловушку для захвата изменений состояния из документации:

Мутации, подписки, таймеры, ведение журнала и другие побочные эффекты не допускаются внутри основного тела функционального компонента (называемого фазой рендеринга React). Это может привести к запутанным ошибкам и несоответствиям в пользовательском интерфейсе.

Вы можете импортировать его следующим образом:

import React, { useState, useEffect } from 'react';

Следующий фрагмент кода поможет вам зарегистрировать состояние interested изменения:

useEffect(() => {
   console.log(interested);
}, ['state has changed', interested]);

Надеюсь, что прояснится.

Answer 2

Я получил способ выполнять асинхронные запросы с функциональным компонентом реагирования, используя эффект, публикуя здесь, чтобы это могло помочь другим,

  React.useEffect(() => {
    if (showReport) {
      fetch("https://website.com/json")           // Get the data external or internal
        .then(res => res.json())
        .then(ip => Promise.all([ip, getSomethingElse()]))    // Get something else, again external or internal function call
        .then(([ip, gp]) => {
          setData(gp);                               // Update the state
          setIp(ip);
          setShowReport(false);
        });
    }
  }, [showReport]);

Надеюсь, что это поможет другим