Как обновить содержимое нынешней страницы 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;