Блог

Я следую этому примеру, пытаясь создать элемент управления обновлением, я хочу, чтобы пользователь мог обновлять страницу и обновлять информацию из API. На данный момент страница загружается один раз, когда вы изначально загружаете страницу, и «Нажатие для обновления» ожидает всего 2 секунды. Я пробовал так много вещей, таких как создание функции API для извлечения данных или выполнение запроса внутри функции onRefresh (), но ни одно из них не сработало..

Что мне нужно изменить в моем коде, чтобы данные обновлялись, когда пользователь обновляет страницу?

Код:

 const wait = (timeout) => {
 return new Promise(resolve => {
  setTimeout(resolve, timeout);
 });
}

function HomeScreen() {

const [refreshing, setRefreshing] = React.useState(false);
const [view, setview] = useState('');
const tableHead =  ['Room Number', 'Created at', 'Type'];

const onRefresh = React.useCallback(() => {
setRefreshing(true);

wait(2000).then(() => setRefreshing(false));
}, []);

fetch('https://xxx.xxxxxx.com/getrooms')
  .then(response => response.text())
  .then(data => setview(data))

const tableData = [];
const ap = view.split('(');
for (let i = 0; i < ap.length - 1; i  = 3) 
{
    const rowData = [];
    for (let j = i; j < i   3; j  = 1) 
    {
        rowData.push(ap[j]);
    }
    tableData.push(rowData);
}
return (
<View style={{flex: 1, padding: 16, paddingTop: 30, backgroundColor: '#D8D8D8'}}>
<SafeAreaView style={{flex: 1, marginTop: Constants.statusBarHeight}}>
  <ScrollView
    contentContainerStyle={styles.scrollView}
    refreshControl={
      <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
    }
  >
  <Table borderStyle={{borderWidth: 2, borderColor: '#c8e1ff'}}>
    <Row data={tableHead} style={{height: 40, backgroundColor: '#f1f8ff'}}/>
    <Rows data={tableData} style={{margin: 6}}/>
  </Table>
  </ScrollView>
</SafeAreaView>
</View>
 );
}