Почему моя функция рендеринга работает до моего компонентаWillMount

Question

Всякий раз, когда я пытаюсь извлечь мои результаты из компонента componentWillMount, приложение сначала выводит render(), а затем попадает в компонент componentWillMount, извлекает мои результаты, устанавливает состояние, а затем снова отображает рендеринг.

componentWillMount=() => { 
    let team = gh.getRepo('Microsoft', 'vscode'); 
    team.getContributors(function(err, members){ 
    }).then(response => { 
     this.setState({ 
     data: response.data 
     }); 
    }); 
} 


render() { 
    var ghList = this.state.data; 
    const names = ghList.map(name => { //when it runs the first time this map in invalid since ghList is null from my this.setState= {data:null} 
}) 
return (
     <div className="flip-container" onClick={this.onTileClick}> 
     <div className="flipper"> 
      <div className="front"> 
       <img className="circle" src={this.state.avatar_url} alt={this.state.login}/> 
      </div> 
     <div className="back"> 
     </div> 
     </div> 
     </div> 
) 

Answer 1

Если я правильно понял, это ожидаемое поведение. Что происходит:

1. componentWillMount(): инициирует запрос асинхронной (getContributors).
2. render() первый раз, с this.state.data = undefined.
3. вызывается обратный вызов от getContributors (ответ пришел), а затем вызывается setState: setState планирует новый рендеринг.
4. визуализация() второго раза, с населенной this.state.data

Вы должны обрабатывать ваше начальное состояние рендеринга (как ваш компонент будет оказывать до АЯКСА возвращений: возможно, некоторые загрузки кок ..) , Таким образом, в методе рендеринга вы можете проверить, this.state.datanull/undefined и обойти вашу логику. Или, в конструкторе, установите данные в пустой массив:

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

Таким образом, по крайней мере ghList.map не будет выброшена ошибкой.