Route и UseEffect

@antihacker1981 · Регистрация: 18.12.2019

Студворк — интернет-сервис помощи студентам

Всем привет !

Вот код.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
//----TASKS-------------------------
export const  Tasks =() =>
 {return (<div><h1>Tasks</h1></div>);}
 
 //----PROFILE-----------------------
 export const  Profile=() =>
{return (<h1>Профайл</h1>);}
 
//----MAIN PAGE----------------------
export const  MainPage=() =>
{return (<h1>Главная страницаf</h1>);}
 
//----FORMS----------------------
export const  Forms=() =>
{
  let history= useHistory()
 
  let ref_forms_list = React.useRef()
  //Page loading
  let [ddl_forms_options,setFormsOptions]=React.useState([])
  
    //Getting forms lists
    React.useEffect(async() => {
      var url_forms_list = 'http://srvapp005dev:5002/rs/formlist/'+localStorage.getItem('utoken')
      let res_from_list = await fetch(url_forms_list)
      let res = await res_from_list.json()
      let ddl_forms_options1 = res.map(form_item => {return <option key={form_item.form_id} value={form_item.form_id}>{form_item.form_name}</option>})
      setFormsOptions(ddl_forms_options1)
    },[history])
 
  //Change form type
  function Change_Forms_list(event)
  {alert(event)}
 
  return (
     <div><br></br>
           <center><select ref={ref_forms_list} id='ddl_forms_list' onChange={e => Change_Forms_list(e.target.value)}>{ddl_forms_options}</select></center>
     </div>);
}
 
function Main() {
  let history = useHistory(); 
  function logout()
    {history.push('/login'); localStorage.removeItem("utoken"); }     
   
  let [cur_btn_style,set_cur_btn_style] = useState('')
  let current_user = localStorage.getItem('current_user')
 
  async function ChangeStyle(event)
    {  
      
      let tasks = document.getElementById("tasks");
      let main = document.getElementById("main");
      let forms = document.getElementById("forms");
 
      tasks.className ='navbarbtn navbarbtn-left'
      main.className ='navbarbtn navbarbtn-left'
      forms.className ='navbarbtn navbarbtn-left'
      
      tasks.style.color  ='white'
      main.style.color  ='white'
      forms.style.color  ='white'  
  
      event.className ='navbarbtn1 navbarbtn-left'
      event.style.color ="black";
  
      //history.push('/'+event.id)
      //window.location.reload();     
    } 
 
  return (
    <BrowserRouter>
      <div className="navbar" id="menu_root">
   
          <Link id = "main"  className="navbarbtn navbarbtn-left"  to="/main"  onClick={e=>ChangeStyle(e.target)}> Главная </Link>
        
          {/* <div id = "subnav" className="subnav subnav-left">  */}
          <Link id = "tasks" to="/tasks"  className="navbarbtn navbarbtn-left"  onClick={e=>ChangeStyle(e.target)}> Задачи </Link> 
          <Link id = "forms" to="/forms"  className="navbarbtn navbarbtn-left"  onClick={e=>ChangeStyle(e.target)}> Формы </Link> 
н
          <div className="subnav">
          <Link to="#" className="navbarbtn navbarbtn-right" > {current_user} </Link> 
              <div className="subnav-content">
                <Link id ='profile' to="/profile"> Профайл </Link>
                <Link to="/login" onClick={logout}>  Выйти  </Link>
              </div>
          </div>  
            
      </div>
   
          <Switch>
          <Route path="/login">
            <LoginPage />
          </Route>
            <PrivateRoute path="/main">
              <MainPage />
            </PrivateRoute>
            <PrivateRoute path="/forms">
              <Forms />
            </PrivateRoute>            
            <PrivateRoute  path="/tasks" component={Tasks}>
              <Tasks />
            </PrivateRoute>
            <PrivateRoute path="/profile">
              <Profile />
            </PrivateRoute>
          </Switch>
        
      </BrowserRouter> 
    
    );
  
}
 
export  default Main

Не понятное поведение из за UseEffect. Когда по меню переходишь между MainPage и Tasks , то все норм. А когда переходишь в Forms, то же норм. Проблема когда после Forms переходишь в другие закладки. Переходит без ошибок, но страница пустая. Надо обновить страницу. Тогда появится элементы. Если из Forms убрать UseEffect, то все норм. Подскажите тупому.

Добавлено через 4 часа 50 минут
Все. Нашел.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   //Getting forms lists
    React.useEffect( () => {
 
      async function fetchData()
        {
        var url_forms_list = 'http://srvapp005dev:5002/rs/formlist/'+localStorage.getItem('utoken')
        let res_from_list = await fetch(url_forms_list)
        let res = await res_from_list.json()
        let ddl_forms_options1 = res.map(form_item => {return <option key={form_item.form_id} value={form_item.form_id}>{form_item.form_name}</option>})
        setFormsOptions(ddl_forms_options1)
        }
      fetchData()
 
    },[])

@UseMuse · 19.08.2020, 13:21

Сообщение от antihacker1981

JavaScript
1
React.useEffect(async() => {

useEffect не может быть async, но может содержать и выполнять асинхронные функции

Новые блоги и статьи Все статьи Все блоги /
Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .
Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .