Способ доступа к данным ответов вне области действия в React

Question

Это мой первый раз, чтобы разработать приложение реагирования.

Я буду использовать ответ get axios для заполнения таблицы. Внешний переменный объявлен и используется вне области действия.

Есть ли способ использовать ответ get axios вне / в глобальной области видимости?

Большое спасибо за вашу помощь.

const getServerData = async ({ filters, sortBy, pageSize, pageIndex }) => {
  await new Promise(resolve => setTimeout(resolve, 500));

let rows = [];

  axios
    .get(`url here`)
    .then(res => {
      console.log(res.data);
     }
    });


  //access res outside scope - is this possible?
  rows.push({res.data});

Answer 1

Вы должны использовать некоторую форму состояния для отслеживания строк.

import React, { useState, useEffect } from "react";
import axios from 'axios';

import "./styles.css";

function App() {
  // Initialize a rows state variable that will be set to [] on the initial load.
  const [rows, setRows] = useState([])

  useEffect(() => {
    // Fetch the data when the component is mounted
    axios
      .get(`url here`)
      .then(res => {
        // Store the response (the rows) in the state variable.
        setRows(res)
      })
  }, [])

  /*
   * On the initial mount nothing will be rendered, when the rows variable
   * is updated a re-render will be triggered and your rows can be rendered.
   */
  return (
    <div>
     { rows.map(row => <tr>A row!</tr>) }
    </div>
  );
}

Предлагаю прочитать https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

const getServerData = async ({filters, sortBy, pageSize, pageIndex}) => {ожидание нового обещания (resol => setTimeout (resol, 500));

let responseData = {};

let rows = [];

axios .get (url here) .then (res => responseData = res.data);

// доступ к res вне области -возможно путем создания глобальной переменной и присвоения ей значения в области.

rows.push ({responseData});