Вытащить результат переменных из функции

@Alex562035 · Регистрация: 04.01.2018

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

Приветствую формучане, подскажите как мне из функции test() вытащить полученный результат переменных res4 и col, на 34 и 36 строке чтобы продолжить с ними дальше работу со 127 строки. Ведь я их объявил глобально за пределами области функции в начале как let col; и let res4, но они выводяться в alert как undefined за пределами функции. Как мне в этой ситуации поступить? Для удобства показываю файл JSX:

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
const ExecutorOrders = () => {
    let col;
    let res4;
    useEffect(() => {
        
    async function test(){
        let response3 =  await fetch('/users/get-current-user', {
        method: 'GET',
        headers: {
            'Authorization': localStorage.getItem('tokens')
        }
    })
        let res = await response3.json()
 
        let resJson = await res['userDataId']
        let userId = await fetch('/api/userDatas/' + resJson + '/client' ,  {
            method: 'GET',
            headers: {
                'Authorization': localStorage.getItem('tokens')
            }
    })
        let res3 = await userId.json()
        
        let result = res3["_links"]["self"]["href"]; // получить ссылку
        let unique = result.split('/');
        let id = unique[unique.length-1];
 
        let response4 = await fetch('/api/orderEntities/search/findByOwnerId?id=' + id, {
            method: 'GET',
            headers: {
                'Authorization': localStorage.getItem('tokens')
            }
        })
        res4 = await response4.json() //получение JSON
        // alert(res4["_embedded"]["orderEntities"][1]["title"]);
        col = res4["_embedded"]["orderEntities"].length; // получение количества id
        
        
    }
    test()
    });
        
        
 
        const embedded = [ {
              "title" : "Сделать сайт",
              "description" : "Верстка макета",
              "cost" : 999.0,
              "dueDate" : "2020-12-08T06:27:34.868-05:00",
              "completeDate" : null,
              "isPaid" : false,
              "bids" : [ ],
              "chosenBid" : null,
              "_links" : {
                "self" : {
                  "href" : "api/orderEntities/ab50620a-06da-4720-99db-56621f419305"
                },
                "orderEntity" : {
                  "href" : "api/orderEntities/ab50620a-06da-4720-99db-56621f419305"
                },
                "category" : {
                  "href" : "/api/orderEntities/ab50620a-06da-4720-99db-56621f419305/category"
                },
                "owner" : {
                  "href" : "/api/orderEntities/ab50620a-06da-4720-99db-56621f419305/owner"
                }
              }
            }, {
              "title" : "Починить ноутбук",
              "description" : "Диагностика ноутбука ",
              "cost" : 1200.0,
              "dueDate" : "2020-12-07T01:36:20.922-05:00",
              "completeDate" : null,
              "isPaid" : false,
              "bids" : [ ],
              "chosenBid" : null,
              "_links" : {
                "self" : {
                  "href" : "/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e"
                },
                "orderEntity" : {
                  "href" : "/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e"
                },
                "category" : {
                  "href" : "/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e/category"
                },
                "owner" : {
                  "href" : "/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e/owner"
                }
              }
            } ]
 
    return(
        <>
            <section className={s.orders}>
                <div className={s.orders__container}>
                    <h2 className={s.orders__title}>Мои заказы</h2>
                    <form action="#" className={s.orders__form}>
                        <div className={s.orders__flex}>
                            <input className={s.orders__input} type="text" placeholder="Поиск заказа"/>
                            <button className={s.orders__button} type="submit">Найти</button>
                        </div>
                    </form>
                    <ul className={s.orders__menu}>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">На исполнении</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">В конкурсе</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые успешно</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые с опозданием</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые не выполненные</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">в арбитраже</a>
                        </li>
                    </ul>
                </div>
            </section>
            <section className={s.execution}>
                {col ? embedded.map(item => (
                <div className={s.execution__container}>
                    <div className={s.execution__box}>
                        <div className={s.execution__info}>
                            <div className={s.execution__list}>
                                <p className={s.execution__services}>Услуга:</p>
                                <p className={s.execution__services}>Срок исполнения: до 30.09.2020</p>
                                <p className={s.execution__services}>Стоимость: {item.cost} Р</p>
                            </div>
                            <p className={s.execution__name}>Название: <span>{item.title}</span></p>
                            <div className={s.execution__description}>{item.description}</div>
                            <p className={s.execution__user}>Исполнитель: <a href="#" className="execution__link">Иванов Иван</a> <img src="https://s8.********************/uploads/images/2020/11/6ef562d4767cba575a5ac931c26e6bdb.png" alt=""/></p>
                        </div>
                        <div className={s.execution__info}>
                            <img className={s.execution__img} src="https://s8.********************/uploads/images/2020/11/830b09a113baebf4d6272d86719a2bde.png" alt=""/>
                            <button className={s.execution__button}>закрыть заказ</button>
                        </div>
                    </div>
                </div>
                ))
                : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }
            </section>
        </>
    );
}
 
 
export default ExecutorOrders;

@FloppyDisc · 05.12.2020, 23:06

Используйте состояния, а не "глобальные" переменные, а undefined они потому, что вы их просто объявили и на момент первого рендера они таковыми и являются, потом последует useEffect

@Alex562035 · 06.12.2020, 13:39 **[ТС]**

Я не совсем понимаю пока что хуки поэтому решил переписать код в виде классового компонента и уже создать state и не знаю как правильно мне объявить setState, чтобы colNew и resNew приняли у меня новые значения и я продолжил с ними работать после render(). На 44 и 49 строке я попытался как-то изменить state, но понимаю что пишу полный бред.

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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
class ExecutorOrders extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            colNew: '',
            resNew: ''
        }
    }
   
    componentDidMount(){
        
    async function test(){
        let response3 =  await fetch('http://79.174.13.220:8080/users/get-current-user', {
        method: 'GET',
        headers: {
            'Authorization': localStorage.getItem('tokens')
        }
    })
        let res = await response3.json()
 
        let resJson = await res['userDataId']
        let userId = await fetch('http://79.174.13.220:8080/api/userDatas/' + resJson + '/client' ,  {
            method: 'GET',
            headers: {
                'Authorization': localStorage.getItem('tokens')
            }
    })
        let res3 = await userId.json()
        
        let result = res3["_links"]["self"]["href"]; // получить ссылку
        let unique = result.split('/');
        let id = unique[unique.length-1];
 
        let response4 = await fetch('http://79.174.13.220:8080/api/orderEntities/search/findByOwnerId?id=' + id, {
            method: 'GET',
            headers: {
                'Authorization': localStorage.getItem('tokens')
            }
        })
        let res4 = await response4.json() //получение JSON
        // alert(res4["_embedded"]["orderEntities"][1]["title"]);
        let col = res4["_embedded"]["orderEntities"].length; // получение количества id
        
            this.setState( {colNew: this.state.colNew + col});
    }
    test()
    }
    render(){
        const {colNew} = this.state;
        const embedded = [ {
              "title" : "Сделать сайт",
              "description" : "Верстка макета",
              "cost" : 999.0,
              "dueDate" : "2020-12-08T06:27:34.868-05:00",
              "completeDate" : null,
              "isPaid" : false,
              "bids" : [ ],
              "chosenBid" : null,
              "_links" : {
                "self" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/ab50620a-06da-4720-99db-56621f419305"
                },
                "orderEntity" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/ab50620a-06da-4720-99db-56621f419305"
                },
                "category" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/ab50620a-06da-4720-99db-56621f419305/category"
                },
                "owner" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/ab50620a-06da-4720-99db-56621f419305/owner"
                }
              }
            }, {
              "title" : "Починить ноутбук",
              "description" : "Диагностика ноутбука ",
              "cost" : 1200.0,
              "dueDate" : "2020-12-07T01:36:20.922-05:00",
              "completeDate" : null,
              "isPaid" : false,
              "bids" : [ ],
              "chosenBid" : null,
              "_links" : {
                "self" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e"
                },
                "orderEntity" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e"
                },
                "category" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e/category"
                },
                "owner" : {
                  "href" : "http://79.174.13.220:8080/api/orderEntities/6f6a89c5-c9ad-46e3-a016-a2a23123772e/owner"
                }
              }
            } ]
 
    return(
        <>
            <section className={s.orders}>
                <div className={s.orders__container}>
                    <h2 className={s.orders__title}>Мои заказы</h2>
                    <form action="#" className={s.orders__form}>
                        <div className={s.orders__flex}>
                            <input className={s.orders__input} type="text" placeholder="Поиск заказа"/>
                            <button className={s.orders__button} type="submit">Найти</button>
                        </div>
                    </form>
                    <ul className={s.orders__menu}>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">В конкурсе</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">На исполнении</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые успешно</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые с опозданием</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">закрытые не выполненные</a>
                        </li>
                        <li className={s.orders__item}>
                            <a className={s.orders__link} href="#">в арбитраже</a>
                        </li>
                    </ul>
                </div>
            </section>
            <section className={s.execution}>
                {this.state.colNew ? embedded.map(item => (
                <div className={s.execution__container}>
                    <div className={s.execution__box}>
                        <div className={s.execution__info}>
                            <div className={s.execution__list}>
                                <p className={s.execution__services}>Услуга:</p>
                                <p className={s.execution__services}>Срок исполнения: до 30.09.2020</p>
                                <p className={s.execution__services}>Стоимость: {item.cost} Р</p>
                            </div>
                            <p className={s.execution__name}>Название: <span>{item.title}</span></p>
                            <div className={s.execution__description}>{item.description}</div>
                            <p className={s.execution__user}>Исполнитель: <a href="#" className="execution__link">Иванов Иван</a> <img src="https://s8.********************/uploads/images/2020/11/6ef562d4767cba575a5ac931c26e6bdb.png" alt=""/></p>
                        </div>
                        <div className={s.execution__info}>
                            <img className={s.execution__img} src="https://s8.********************/uploads/images/2020/11/830b09a113baebf4d6272d86719a2bde.png" alt=""/>
                            <button className={s.execution__button}>закрыть заказ</button>
                        </div>
                    </div>
                </div>
                ))
                : <p className={s.execution__order}>У Вас ещё пока нет заказов</p>
                }
            </section>
        </>
    );
}
 
}
 
 
export default ExecutorOrders;

@FloppyDisc · 06.12.2020, 13:47

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

Я не совсем понимаю пока что хуки поэтому решил переписать код в виде классового компонента

Не надо ничего переписывать.

вот пример с хуками

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// это замените
let col;
let res4;
 
// на это
 
const [ col, setCol ] = useState(0);
const [ res4, setRes4 ] = useState({});
 
...
 
// это замените
res4 = await response4.json() //получение JSON
 // alert(res4["_embedded"]["orderEntities"][1]["title"]);
col = res4["_embedded"]["orderEntities"].length; // получение количества id
 
// на это
 
setRes4(await response4.json());
 
alert(res4["_embedded"]["orderEntities"][1]["title"]);
 
setCol(res4["_embedded"]["orderEntities"].length);

В теории должно сработать, но там бы еще проверки не помешали бы, на HTTP 200 OK, на существование элементов в объекте: _embedded, orderEntities, [1] и title, так и самого res4. Иначе ждите еще ошибок в духе "can't access property"

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .

@FloppyDisc Особый статус 623 / 221 / 164 Регистрация: 18.11.2015 Сообщений: 1,086
	05.12.2020, 23:06
	Используйте состояния, а не "глобальные" переменные, а undefined они потому, что вы их просто объявили и на момент первого рендера они таковыми и являются, потом последует useEffect 1