Вызов React Axios не отображает никаких данных, даже если в файле console.log отображаются данные

Question

У меня есть места в моем приложении React, которое выполняет вызовы Axios и отображает данные очень хорошо.

Однако я хотел цикл for и нашел ответ кода на стеке, но ему 3 года,поэтому мне интересно, если что-то изменилось.

1. Я использую webApi вместо Axios - это псевдоним, и я использую в другом месте приложения для пути к серверу, а также для вызова сconsole.log(.. работает с отображением массива.
2. Меня интересует структура .get / .then с функцией (событием). Я не делаю этого при других вызовах web api
3. Может ли быть проблема с состоянием или const в render ()?Как будто что-то уже произошло, и HTML-таблица остается пустой?

Это мой вызов для извлечения данных, и console.log показывает данные отлично.

webApi.get(`clinical/offlinemembers/${id}`)
        .then(function(event){
            console.log("event.data", event.data);
            th.setState({
                data: event.data
            });
        });

Затем в полном коде явставьте ниже, обратите внимание на const {contents} Я был бы рад, если бы этот стиль кода работал.

Вот полный код .js

import React from 'react';
import webApi from './api/webApi';
import { withRouter, Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import queryString from 'query-string';
//import ActivateAccount from './ActivateAccount';


function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}


class MemberOffline extends React.Component {

    constructor(){
        super();
        this.state = {
            data: []
        }
    }

    componentDidMount() {
        var th = this;


        const id = getQueryVariable('id');
        console.log("id", id );

        // webApi.get(`clinical/offlinemembers/${id}`)
        //     .then(res => {
        //         console.log("res", res);
        //     });

        webApi.get(`clinical/offlinemembers/${id}`)
            .then(function(event){
                console.log("event.data", event.data);
                th.setState({
                    data: event.data
                });
            });


    }

    render() {
        const contents = this.state.data.forEach(item => {
            //change the title and location key based on your API
            return <tr>
              <td>{item.member_name}</td> 
              <td>{item.member_ID}</td>
              <td>{item}</td>
              <td></td>
              <td></td>
            </tr>
        })
        return(
            <div class="container-fluid">
                <div>Case Trakker Dynamo Disconnect | TXAetna</div>
                <table class="table table-bordered">
                <tr>
                    <th>Member Name</th>
                    <th>Member ID</th>
                    <th>DOB</th>
                    <th>Current ILTCM Program Type</th>
                    <th>SAI Status</th>
                </tr>
                {contents}
                </table>
            </div>
        )
    }
}


export default MemberOffline;     

Answer 1

Это должно работать:

1. Нет необходимости в var th = this;.Вы можете использовать функции стрелок и не нужно восстанавливать контекст.

2. Невозможно отобразить объекты в реакции, возникнет ошибка.Следовательно, строка <td>{item}</td> не требуется.

3. Map over forEach: поскольку нам не нужно вызывать побочные эффекты для наших данных, карта возвращает новыймассив в целом. Мутация состояния - большая отрицательная реакция.

   import React from 'react';
   import webApi from './api/webApi';
   import { withRouter, Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
   import queryString from 'query-string';
   //import ActivateAccount from './ActivateAccount';
   
   
   function getQueryVariable(variable)
   {
           var query = window.location.search.substring(1);
           console.log(query)//"app=article&act=news_content&aid=160990"
           var vars = query.split("&");
           console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
           for (var i=0;i<vars.length;i++) {
                       var pair = vars[i].split("=");
                       console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
           if(pair[0] == variable){return pair[1];}
            }
            return(false);
   }
   
   
   class MemberOffline extends React.Component {
   
       constructor(){
           super();
           this.state = {
               data: []
           }
       }
   
       componentDidMount() {
   
           const id = getQueryVariable('id');
           console.log("id", id );
   
           // webApi.get(`clinical/offlinemembers/${id}`)
           //     .then(res => {
           //         console.log("res", res);
           //     });
   
           webApi.get(`clinical/offlinemembers/${id}`)
               .then((event) => {
                   console.log("event.data", event.data);
                   this.setState({
                       data: event.data
                   });
               });
   
   
       }
   
       render() {
           const contents = this.state.data.map(item => (
               //change the title and location key based on your API
               <tr>
                 <td>{item.member_name}</td> 
                 <td>{item.member_ID}</td>
                 <td></td>
                 <td></td>
               </tr>
           ))
           return(
               <div class="container-fluid">
                   <div>Case Trakker Dynamo Disconnect | TXAetna</div>
                   <table class="table table-bordered">
                   <tr>
                       <th>Member Name</th>
                       <th>Member ID</th>
                       <th>DOB</th>
                       <th>Current ILTCM Program Type</th>
                       <th>SAI Status</th>
                   </tr>
                   {contents}
                   </table>
               </div>
           )
       }
   }
   
   
   export default MemberOffline;