Как обновить содержимое нынешней страницы React по выполнению асинхронной функции, результатом которой должно стать конкретное значение

Есть код, внутри него есть кнопка, которая вызывает функцию send_about()

Задача стоит следующая, чтобы после того как в fetched_info положили информацию, выполнилась функция setPopout(null)

Я бьюсь над вопросом уже не первый день и я буду рад большинству ответов, которые помогут мне понять как решить данную проблему, спасибо!

import React, { useState, useEffect } from 'react';
import {ScreenSpinner, SplitLayout, SplitCol, FormItem, Textarea, Group, Button, Spacing} from '@vkontakte/vkui';
import api from '../../../api'

const Persik = ({fetchedUser, secondUser, fetchAbout}) => {
    const [popout, setPopout] = useState(<ScreenSpinner size='large' />);
    const [form_render, setForm] = useState(null);
    useEffect(()=>{
        async function send_about(){
            const textarea = document.getElementById('textarea_about')
            const fetched_info = api.post(`/owner/${secondUser.id}/about/?about=${textarea.value}`)
            setPopout(<ScreenSpinner size='large' />)
        }
        async function disable_check(){
            console.log(fetchAbout)
            if (fetchedUser.id == secondUser.id){
                setForm(
                <>
                    <Textarea id='textarea_about'
                        placeholder="Пишите сюда Всё, что необходимо знать другим игрокам"
                        defaultValue={`${fetchAbout[8]}`}
                    />
        
                    <Spacing size={24}>
                    </Spacing>
        
                    <Button size="l" appearance="accent" align="center" onClick={()=>{
                        send_about();
                    }}>
                        {"Сохранить"}
                    </Button>
                </>
                )
                setPopout(null);
                console.log('Форма изменена в пользу владельца')
            }
            else{
                setForm(
                <>
                    {`${fetchAbout[8]}`}
                </>);
                setPopout(null);
                console.log('Форма изменена в пользу читающего')
            }
        }
        disable_check();
    }, [])

    return(
        <>
            <SplitLayout popout={popout}>
                <SplitCol>
                    <Group>
                        <FormItem top="Об Игроке">
                            {form_render}
                        </FormItem>
                    </Group>
                </SplitCol>
            </SplitLayout>
        </>
    )
}

export default Persik;

Ответы (0 шт):