Обновление данных в форме

@Santa866 · Регистрация: 26.05.2019

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

Доброго времени суток, появился вопрос по react'у.
Есть код:

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
export default class HelloWorldApp extends React.Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
            value: '',
            clientNAME: '',
            clientLASTNAME: '',
            clientBONUS: '',
            clientSUMM: '',
            clientGROUP: '',
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.searchV = this.searchV.bind(this);
        this.qrscan = this.qrscan.bind(this);
    }
 
    searchV(event){
        Poster.clients.find({
            searchVal: ""+this.state.value+"",
        })
            .then(function (result) 
            {
                Poster.interface.showNotification({
                    title: 'Клиент',
                    message: result.foundClients[0].firstname+"."+result.foundClients[0].lastname,
                    icon: 'https://joinposter.com/upload/apps/icons/posterboss-ios.png',
                });
                //Poster.interface.closePopup();
            });
    }
 
    handleChange(event){
        this.setState({value: event.target.value});
    }
 
 
    handleSubmit(event){
        Poster.clients.find({
            searchVal: ""+this.state.value+"",
        })
            .then(function (result) 
            {
                Poster.orders.getActive()
                    .then(function (order) 
                    {
                        Poster.orders.setOrderClient(order.order.id, result.foundClients[0].id)
                            .then(function (result){
                            });
                    });
            });
        Poster.interface.closePopup();
        event.preventDefault();
        setTimeout(() => {this.next();}, 1000);
    }
 
    render() {
 
        //let { clientNAME, clientLASTNAME, clientBONUS, clientSUMM, clientGROUP } = this.props;
        // добавить кнопку найти, выводить кнопку продолжить, если нашелся клиент по номеру карты или Qr-коду
        return (
            <form className="leader" onSubmit={this.handleSubmit}>
                <table width="100%" height="100%">
                    <tr>
                        <td colspan="2">Введите номер карты:</td>
                        <td rowspan="2"><button type="button" className="btnsearch" onClick={this.searchV}>Найти</button></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="text" value={this.state.value} onChange={this.handleChange}></input></td>
                    </tr>
                    <tr>
                        <td>Имя</td>
                        <td>{this.state.clientNAME}</td>
                        <td rowspan="3"><button type="button" className="btnscan" onClick={this.qrscan}>Scan QR</button></td>
                    </tr>
                    <tr>
                        <td>Фамилия</td>
                        <td>{this.state.clientLASTNAME}</td>
                    </tr>
                    <tr>
                        <td>Бонусы</td>
                        <td>{this.state.clientBONUS}</td>
                    </tr>
                    <tr>
                        <td>Сумма покупок</td>
                        <td>{this.state.clientSUMM}</td>
                        <td rowspan="2"><input type="submit" value="Продолжить"></input></td>
                    </tr>
                    <tr>
                        <td>Группа клиентов</td>
                        <td>{this.state.clientGROUP}</td>
                    </tr>
                </table>
            </form>
        );
    }
}

В input ввожу номер карты, нажимаю на кнопку найти. Происходит поиск клиента в базе и извлекаются данные этого клиента (имя, фамилия, бонусы, сумма покупок и группа). Изначально в форме значения пустые и после нажатия на кнопку необходимо их обновить на те, которые блыи получены после нахождения клиента. Подскажите, как это сделать ?

@Egor.S · 11.06.2019, 11:39

у вас же <td>{this.state.clientNAME}</td>, значит просто обновить поле в clientNAME

@Santa866 · 11.06.2019, 11:52 **[ТС]**

Сообщение от Egor.S

у вас же <td>{this.state.clientNAME}</td>, значит просто обновить поле в clientNAME

Можно пожалуйста поподробнее, с react'ом у меня не очень, но приходится делать не нем.

@Egor.S · 11.06.2019, 14:20

после того как получили клиента

JavaScript
1
this.setState({clientNAME: 'имя клиента'})

@Santa866 · 12.06.2019, 10:02 **[ТС]**

Сообщение от Egor.S

после того как получили клиента

Подскажите, если не сложно, вот еще что. С этим примером я разобрался, сделал через async/await и объявление переменных. Это хорошо работает при взятии значения из поля и обновление данных при нажатии. НО есть код:

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
async qrscan(event){
        var clfname = '0';
        var cllname = '0';
        var clbonus = '0';
        var clpay = '0';
        var answ = '0';
 
        var barcode;
        var mtcbarcode = '(?<="barcode":"vk\.cc/).*?(?=")';
        var dbarcode;
 
        await Poster.interface.scanBarcode()
            .then(function(barcode)
            {
                barcode = JSON.stringify(barcode);
                dbarcode = barcode.match(mtcbarcode);
 
                Poster.interface.showNotification({
                        title: '1',
                        message: dbarcode,
                        icon: 'https://joinposter.com/upload/apps/icons/posterboss-ios.png',
                    });
 
                Poster.makeRequest('url', {
                    headers: [
                        'Content-Type: application/json'            
                    ],
                    method: 'get',
                    data: {
                        barcode: dbarcode
                    },
                    timeout: 5000
                },
                (answer) => 
                {
                    if (answer.code == 200)
                    {
                        answ = answer.result;
                        Poster.clients.find({searchVal: ""+answer.result+"",})
                            .then(function (result) 
                            {
                                clfname = result.foundClients[0].lastname;
                                cllname = result.foundClients[0].firstname;
                                clbonus = result.foundClients[0].bonus;
                                clpay = result.foundClients[0].totalPayedSum;
                                // привязка клиента к заказу по id клиента и заказа
                                Poster.interface.showNotification({
                                    title: '2',
                                    message: answer.result,
                                    icon: 'https://joinposter.com/upload/apps/icons/posterboss-ios.png',
                                });
 
                                
                            });
                    }
                });
            });
 
        await this.setState(
        {
            value: answ,
            clientNAME: clfname,
            clientLASTNAME: cllname,
            clientBONUS: clbonus,
            clientSUMM: clpay
        });
 
        await Poster.interface.showNotification({
            title: '3',
            message: answ,
            icon: 'https://joinposter.com/upload/apps/icons/posterboss-ios.png',
        });
 
        event.preventDefault();
    }

В нем вызывается сканер qr-кода, далее отправляется запрос на сервак и получаю номер карты клиента, по этому номеру ищу самого клиента в базе и вывожу значения (как в предыдущем коде). Так же тут присутствуют отправки уведомлений (их 3, в разных частях кода). Проблема в том, что сейчас код выполняется, но значения в this.setState не передаются после сканирования кода, а передаются только те, которые изначально объявлены. Пытался закинуть this.setState в Poster.clients.find, но тогда значения из this.setState не меняются вообще. Подскажите в чем тут проблема и как можно ее решить ?

Добавлено через 9 минут
Как я понимаю, происходит сканирование, выполняется запрос и сразу перекидывает на this.setState, который еще не успел получить данные из answer и дальнейшего кода. Уведомления выводятся в таком порядке 1-3-2, хотя должны все таки выводится 1-2-3.

Новые блоги и статьи Все статьи Все блоги /
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. Пошагово создадим проект для загрузки изображения. . .

@Egor.S 215 / 180 / 79 Регистрация: 02.10.2011 Сообщений: 651
	11.06.2019, 11:39
	у вас же <td>{this.state.clientNAME}</td>, значит просто обновить поле в clientNAME 0

Обновление данных в форме

Решение