Получение двух выходных данных один до и один после componentDidMount - PullRequest
Новая
       39

Получение двух выходных данных один до и один после componentDidMount

0 голосов
/ 23 октября 2018

В консоли я получаю два вывода: один с пустым массивом, а другой с обновленным массивом.Мне нужен только обновленный массив после того, как компонент сделал функцию монтирования .. Как я могу исключить первый ... 

class App extends Component {
  state={
    categories:[]
  };

  componentDidMount() { 
    axios.get(`https://s3.ap-south-1.amazonaws.com/scapic-others/json/models.json`)
      .then(response => {
             this.setState({categories:response.data.categories });
         })
    };

  render() {
    return (  
        <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" /></header>
          <h1 className="shake-opacity shake-freeze">3D models</h1>
         {console.log(this.state.categories)}
        </header>
        <footer className="pv4 ph3 ph5-m ph6-l red">
            <small className="f6 db tc">© 2018 <b className="ttu">Scapic Inc</b>., All Rights Reserved</small>
            <div className="tc mt3">
               {`Made by Renjith`}
            </div>
        </footer>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 23 октября 2018

Причина, по которой вы получаете два вывода на консоль, заключается в том, что componentDidMount is executed after render запускает вызов API, который возвращает ответ асинхронно.Как только ответ становится доступным, вы вызываете setState, который запускает другой рендеринг и, следовательно, второй вывод.

Учитывая необходимое вам поведение, вам нужно иметь состояние загрузки, которое отображается, пока данные недоступны 

class App extends Component {
  state={
    categories:[],
    isLoading: true
  };

  componentDidMount() { 
    axios.get(`https://s3.ap-south-1.amazonaws.com/scapic-others/json/models.json`)
      .then(response => 
        {this.setState({categories:response.data.categories, isLoading: false });
         })
    };


  render() {
    if (isLoading) {
        return <div>Loading...</div>
    }
    return (  
        <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" /></header>
          <h1 className="shake-opacity shake-freeze">3D models</h1>
         {console.log(this.state.categories)}





  <footer className="pv4 ph3 ph5-m ph6-l red">
            <small className="f6 db tc">© 2018 <b className="ttu">Scapic Inc</b>., All Rights Reserved</small>
            <div className="tc mt3">
               {`Made by Renjith`}
            </div>
        </footer>


      </div>



    );
  }
}

export default App;
...