Тема: React: не працює state setter
Як таке може бути взагалі?
Коду багато, не можу його весь сюди привести (якщо щось непомінтно впливає на ситуацію, то я не знаю). Версія React 16.12.0.
Ось такий функціональний компонент з хуком useState:
import React, { useState, createRef } from 'react';
import { Table, Input, Button, Radio, InputNumber, DatePicker, Spin, Icon, Modal } from 'antd';
...
export default function DirectoryTable({ path, refresh, onClick, onFooterMenu }) {
...
const [ destination, setDestination ] = useState('');
...
const onDestinationSelect = data => {
console.log(data);
console.log(typeof data);
setDestination(data);
console.log(destination);
}
const doCopy = () => {
console.log(destination);
//setDestination('');
}
const copyClick = event => {
confirm({
title: i18next.t('copy_destination'),
content: <DestinationModal onSelect={ onDestinationSelect } refresh={ refresh } />,
onOk() {
doCopy();
},
onCancel() {
//setDestination('');
}
});
}
....
const rowSelection = {
selectedRowKeys,
onChange: keys => {
setSelectedRowKeys(keys);
onFooterMenu([<FooterMenu key="footer" visible={keys.length > 0} onClickCopy={ copyClick } />]);
},
...
У компоненті FooterMenu на клік по відповідному елементу спрацьовує onClickCopy={ copyClick }, там викликається модальне вікно для вибору шляху призначення, в якому є and.design'овський компонент Select з обробником onSelect={ onDestinationSelect } який в параметрі отримує рядок зі значенням шляху призначення, я там навтикав console.log'ів, щоб бачити значення стану destination до та після виклику сеттера. Також після натискання кнопки Ok спрацьовує обробник doCopy, де я втикнув ще один console.log - раптом якась затримка в часі виникає. З цією ж метою, я роблю декілька циклів: клік-вибір-ок і в коснолі я бачу, що весь час в стані destination зберігається початкове значення <empty string>:
/test/ directory-table.jsx:52
string directory-table.jsx:53
<empty string> directory-table.jsx:55
<empty string> directory-table.jsx:59
XHRGEThttp://filemanager.com/api/tree
[HTTP/1.1 200 OK 1188ms]
/test/test01/ directory-table.jsx:52
string directory-table.jsx:53
<empty string> directory-table.jsx:55
<empty string>
WTF?