Как передать массив GET запроса в таблицу?

Question

[Siv_Nefzer]

Суть проблемы. Необходимо вывести данные, полученные с GET запросы в Таблица на страницу. На статичном массиве, который задаю руками, все нормально отрабатывает, с массивом из GEt запроса таблица пустая. Массив из GET запроса получаю нормально, он идентичен статичному массиву. Но данные формировать н ехочет. Подскмжите в чем проблема и как её решить. делаю все на AIrframe

const tastDate2 = [
    {
      id: 1, 
      number: "02412",
      date: "01.01.2020",
      idstate: 'activ',
      sstatemc: 'state1',
    sstatehl: 'Состояние 1'
    },
    {
      id: 2,
      number: "53412",
      date: "21.01.2020",
      idstate: 'inactiv',
      sstatemc: 'state1',
    sstatehl: 'Состояние 1'
    }};

 let tastDate=[]

  var requestOptionsGet = {
    method: 'GET',
    credentials:'include',
    };
 
  const url0="  url "     ;

             fetch(url0, requestOptionsGet)
                 .then(response => response.json())
                 .then(result => {
                   tastDate=result.content
                                   //console.log(result)
                                   console.log(tastDate)
                                   //this.refreshData(tastDate)
                                   //this.setState({loading:false})
                                  })
                 .catch(error => {
                                  console.log('error', error)
                                  //this.setState({loading:false})
                               });
  // конец GET запроса
  //Рисуем таблицу с данными
class Tables1 extends Component {

    constructor(props) {
        super(props);
      }
    
    render () {
    //конструк для выемки даных из массива и конструирования тела таблтцы
        const newsTemplate = this.props.data.map(function(item, idx) {
      
            return (
                <React.Fragment>
                <tr key = { idx }>
                <td >{item.id}</td>
                <td>{item.number}</td>
                <td>{item.date}</td>
                <td>{item.idstate}</td>
                <td>{item.sstatemc}</td>
                <td>{item.sstatehl}</td>
              </tr>
              </React.Fragment>
            )
          })
         //рисуем таблицу. в нее вставляем тело с данными из массива
        return(
            
            <React.Fragment>
            <Container>
            <div>
                <Table>
                <thead>
                 <tr>
                <th>ID</th>
                <th>number</th>
                <th>date</th>
                <th>idstate</th>
                <th>sstatemc</th>
                <th>sstatehl</th>
                </tr>
                </thead>
              <tbody>
                {newsTemplate}
              </tbody>
                </Table>
            </div>
            </Container>
            </React.Fragment>
        )

    }
}
// отрисовываем таблицы и проводим экспорт
const Tables = () => {
    return (
      <React.Fragment>
        <p>Таблица с статичными данными, подгружаемыми из массива</p>
         <Tables1 data={tastDate2} />
         <p>Таблица с заддыми из GET запроса</p>
        <Tables1 data={tastDate} />
      </React.Fragment>
    )

  }

Comments

[Алексей]

Вызывать fetch нужно в componentDidMount

[Siv_Nefzer]

Алексей,
попробовал загнать внутрь компонента

componentDidMount() {
    let tastDate=[] 
    var requestOptionsGet = {
      method: 'GET',
      credentials:'include',
      };
      const url0=" url " ;
   
                fetch(url0, requestOptionsGet)
                   .then(response => response.json.stringify())
                   .then(result => {
                     tastDate = result.content
                                     //console.log(result)
                                     console.log(tastDate)
                                     //this.refreshData(tastDate)
                                     //this.setState({loading:false})
                                    })
                   .catch(error => {
                                   // console.log('error', error)
                                    //this.setState({loading:false})
                                 });
               }

не помогло.
Попробовал сделать отдельный компонент с последующим экспортом\импортом массива. тоже не помогло. что не так делаю подскажите пожалуйста?

[Алексей]

А почему setState закомментирован?

[Siv_Nefzer]

Алексей, здесь this.setState({loading:false}) 'Отработка загрузки, вроде как загзулось или ошибку выдало. ВО только данные берутся по Гет запросу, но такое чувство что потом массив чиститься под 0

Answer 1

[Дмитрий]

React не отслеживает задание переменных напрямую. Нужно использовать setState (в данном случае у then фетча) и данные внутри this.state.
А само получение данных поместить в componentDidMount
и при незаданной переменной выводить лоадер (надпись что грузится)

лучше погуглить про state/setState