Потоковые куски данных с сервера с использованием React JavaScript Reader, кажется, блокируется до тех пор, пока не закр ⇐ Javascript

[Anonymous]

Я новичок в программировании Frontend, и мне дают кодовую базу React для обновления. и непрерывно транслируйте данные из бэкэнд и постоянно обновлять фронта по мере получения данных. (На данный момент я регистрирую консоли полученные данные) Я использую чтения потока JavaScript для этой задачи. < /P>
Ожидаемое поведение заключается Поступит, но наблюдаемое поведение заключается в том, что читатель ждет, пока поток не будет закрыт, а затем консоль записывает значения. Я не могу понять, почему. Во всех примерах, которые я вижу, читатель продолжается после получения одной части. Он содержит кнопку загрузки и кнопку подтверждения. Нажатие кнопки «Подтверждение» представляет ранее загруженные данные. < /P>

Код: Выделить всё

const UploadActions = (props: UploadActionsProps) => {
const [isDialogOpen, setIsDialogOpen] = useState(false);
const [loadSwitch, setLoadSwitch] = useState(false);
const {authToken} = useContext(AuthTokenContext);
const {
isObjectUploaded, setIsObjectUploaded,
uploadObjects, setUploadObjects,
uploadObjectErr, setUploadObjectErr
} = useContext(UploadObjectContext) as DataTransferObjectContextType;

useEffect(() => {
(async () => {
// uploadObjects contain data uploaded in a previous page
if (!isObjectUploaded || uploadObjects.length === 0 || !loadSwitch){
return
}

const url = `/add/data`;

const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'text/event-stream',
"authenticity-token": authToken
},
body: JSON.stringify(uploadObjects)
});

// Check if the response is a readable stream
if (response.body) {
const reader = response.body.getReader();
const decoder = new TextDecoder();
let done = false;
// Read the stream in chunks and process them
while (!done) {
const { value, done: doneReading } = await reader.read(); // this is where the problem is. The while loop does not continue until done is set
done = doneReading;

// Decode the chunk into text
const chunk = decoder.decode(value, { stream: true });
console.log(chunk)
}

console.log("done reading values")
} else {
console.error('Stream is not available');
}
})();
}, [loadSwitch]);

const handleUploadActions = (confirmation: boolean): void => {
if (confirmation) {
setLoadSwitch(true)
}
setIsDialogOpen(!isDialogOpen);
}

return (
{/* submit button. When this is pressed confirmation appears */}
 {setIsDialogOpen(true); setLoadSwitch(false)}}
sx={styles.saveButton}
>
Save Data

{/* confirmation button. When clicked handleUploadActions function gets triggered */}
{isDialogOpen &&


}
);
};

export default UploadActions;

Мне просто интересно, не является ли это проблемой с обработкой состояний в React. Но я действительно не знаю, как такое возможно.
Любая помощь приветствуется.
--PPGoodman

Подробнее здесь: https://stackoverflow.com/questions/793 ... r-seems-to