Экран загрузки реакции при обработке функции

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я создаю конвертер Electron / React word в pdf. Я хочу создать экран загрузки, когда функция преобразует файлы.

 <HashRouter>
  <GlobalStyle />
  <ThemeProvider theme={theme}>
    <AppStyle>
      <Navigation />

      <Switch>
        <Route exact path="/documents">
          <AddDocumentForm <---------Add document form component
            setIsLoading={setIsLoading}
            isLoading={isLoading}
          /> 
        </Route>
        <Route path="/documents/:id">
          <Document />
        </Route>
        <Route exact path="/lists"></Route>
        <Route path="/lists/:id"></Route>
      </Switch>
      {isLoading amp;amp; <Loading />} <----Loading Component
    </AppStyle>
  </ThemeProvider>
</HashRouter>
 

В компоненте AddDocumentForm в форме subbmiting я меняю состояние isLoading на true, а когда файлы конвертируются, я меняю его обратно на false. Ничего не происходит, я буду очень благодарен, если кто-нибудь сможет объяснить мне, почему.

PS. Извините за опечатки.

Комментарии:

1. Возможно, обновление состояния не приводит к повторному отображению компонента маршрута. Вместо этого вы можете попробовать использовать контекст. Если вы создадите codesandbox, который воспроизводит проблему, помочь будет намного проще

2. Большое вам спасибо. Я просто забыл не вызывать функцию непосредственно при обратном вызове. Поэтому я просто добавил () => setIsLoading(false) . Извините за беспокойство. Все благодаря вашему предложению codesandbox: D

Ответ №1:

Я только что вызвал функцию непосредственно в обратном вызове. Добавлено «() =>» и все работает.