React js не может установить свойство setstate в ответе ax ios? - PullRequest
Новая
       6

React js не может установить свойство setstate в ответе ax ios?

0 голосов
/ 11 июля 2020

Я получаю данные от ax ios, мне нужно установить ответ в значении состояния для рендеринга в html, когда я печатаю response.results, он показывает данные, но если я устанавливаю response.results в setState() и напечатайте setState(), он показывает пустое значение.

Мой код: 

 componentDidMount() {
    var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.AccessToken,
      }
      var apiURL = window.$_APIurl+"companies";
      axios.get(apiURL, {headers: headers})
      .then((response) => {   
        console.log(response.data.results);        
          if(response.data.results.length > 0)
            {               
            this.setState({               
                "comapanyDetails": response.data.results,
            });
            }  
      })
    console.log(this.state.comapanyDetails)
    console.log(localStorage.toggleClass);
   
    
  }

Он показывает пустой массив, значение не установлено в setState().

Ответы [ 5 ]

0 голосов
/ 11 июля 2020

Попробуйте это, используйте await и asyn c, поскольку ax ios вызывает асинхронно 

componentDidMount() {
    var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.AccessToken,
      }
      var apiURL = window.$_APIurl+"companies";
      const a = (async function(){
        await axios.get(apiURL, {headers: headers})
      .then((response) => {   
        console.log(response.data.results);        
          if(response.data.results.length > 0)
            {               
            this.setState({               
                "comapanyDetails": response.data.results,
            });
            }  
      })
      }
    console.log(this.state.comapanyDetails)
    console.log(localStorage.toggleClass);
   
    
  }
0 голосов
/ 11 июля 2020

Он показывает пустой массив, потому что запрос на получение выполняется асинхронно, вы читаете значение состояния перед его установкой. в вашем рендере вы должны проверить, что данные уже загружены перед показом. Пример: 

class MyComponent extends React.Component{

 componentDidMount() {
    var headers = {
        "Content-Type":"application/json",
        "AccessToken":localStorage.AccessToken,
      }
      var apiURL = window.$_APIurl+"companies";
      axios.get(apiURL, {headers: headers})
      .then((response) => {   
        console.log(response.data.results);        
          if(response.data.results.length > 0)
            {               
            this.setState({               
                "comapanyDetails": response.data.results,
            });
            }  
      })
  }
  render() {
    return ({this.state.comapanyDetails.length > 0 ?
             <!-- here your code for loaded data -->:
             <h1> Loading </h1>});
  }

}
0 голосов
/ 11 июля 2020

Проверьте, будет ли он работать

console.log (this.state.comapanyDetails && this.state.comapanyDetails)

если ваши данные - массив

console.log (this.state.comapanyDetails.length> 0 && this.state.comapanyDetails)

0 голосов
/ 11 июля 2020

Вы регистрируете его вне функции asyn c (ax ios .get). Во время регистрации значение пусто. Если вы хотите правильно логировать, поместите его в .then(...).

0 голосов
/ 11 июля 2020

setState - это асинхронные c операции. Следовательно, не гарантируется, что вы увидите обновленное значение при консольном состоянии сразу после его установки.

Ваш Html следующий: 

{this.state.comapanyDetails.length > 0 ?
<tbody> {this.state.comapanyDetails.map((ComapanyDetails,indx)=> 
<tr key={indx}> <td>{comapanyDetails.name}</td> <td><Link to={{ pathname: 
'/'}} style={{color:'#434b50'}}>
{comapanyDetails.name}</Link></td> </tr> )} </tbody> : <body 
className="noResult"> <tr> <td>No Results Found</td> </tr> </tbody> }

Проблема с именем. В своей функции карты вы используете переменную ComapanyDetails, однако внутри стадии td вы используете comapanyDetails. Введите ComapanyDetails или замените ComapanyDetails на comapanyDetails

...