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

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

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

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

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

Я определил состояние так: 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 Перед срабатыванием Set State false

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

pen.js: 14 Огонь только это правда правда

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


reactjs javascript asynchronous react-functional-component
person indavinci    schedule 07.01.2020    source источник
comment
Отвечает ли это на ваш вопрос? метод useState не сразу отражает изменение   -  person Emile Bergeron    schedule 07.01.2020
comment
@EmileBergeron да, я знал об асинхронном характере, но я надеялся на определенные крайние случаи, возможно, плохие методы кодирования, я надеялся добавить функцию для асинхронного запуска в основном компоненте, похоже, я не могу!   -  person indavinci    schedule 07.01.2020
comment
Значение переменной состояния неизменяемо для области действия функции, поэтому ее значение никогда не изменится. Но поскольку вы устанавливаете его непосредственно перед этим, используйте это значение. const newValue = !interested;   -  person Emile Bergeron    schedule 07.01.2020
comment
Мое решение - распространить это на другой компонент, выполнить работу, можно вернуться сюда, обернуть этот компонент вокруг него ... надеюсь, это должно сработать   -  person indavinci    schedule 07.01.2020

Ответы (2)


arrow_upward
1
arrow_downward

Да, это асинхронный. Значит, вы не сразу увидите изменения.

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

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

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

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

Вы можете импортировать это как:

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

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

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

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

person norbitrial    schedule 07.01.2020
comment
Я использовал useEffect для запуска функции, но есть ли способ использовать асинхронный код в функции InterestShown ()? мое перо с кодом: codepen.io/deepeshkr/pen/PowQWwv - person indavinci; 07.01.2020
comment
Я думаю, что для этого варианта использования useEffect - это правильный способ проверки изменений состояния. - person norbitrial; 07.01.2020
comment
Моя основная функция - HelloWorld, функция, о которой я говорю, внесение этих изменений в функцию InterestShown (), означает ли это, что я не могу вносить какие-либо изменения и в нее? - person indavinci; 07.01.2020
comment
Попробуйте добавить оператор if в свою функцию, а затем вызовите функцию в useEffect - person Logesh P; 07.01.2020
comment
Это кнопка переключения, которая означает, что если операторы не лучшее решение, я попытался объяснить проблему в коде. - person indavinci; 07.01.2020
comment
Вы ссылаетесь на неправильную setState документацию. OP использует крючки. Правой страницей документации является useState. - person Emile Bergeron; 07.01.2020

arrow_upward
0
arrow_downward

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

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

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

person indavinci    schedule 06.02.2020