Лучший способ отображения более асинхронных данных в React

Question

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

render() { 

    return (
    <List> 
     {this.props.data.days.map(function(item){ 
      return (
      <ListItem>Hej</ListItem> 
     ); 
     })} 
    </List> 
); 
} 

props.data это асинхронное данные выбираемые в качестве родительского компонента и передается в качестве состояние к этому компоненту. Это означает, что когда этот компонент сначала отображается, this.props.data не определен, и я получаю сообщение об ошибке Cannot read property 'map' of undefined. Каков предпочтительный способ справиться с этим? Должен ли я что-то делать в разных жизненных циклах или в конструкторе?

Я не использую Flux или Redux.

Я попытался propTypes настройки по умолчанию, например:

class SingleCompetition extends Component { 
    static defaultProps = { 
    data: { days: [] }, 
    } 

    render() { 
    let competition = this.props.data; 

    return (
     <List heading="sunday 150 starts"> 
     {this.props.data.days.map(function(item){ 
      return (
      <ListItem>Hej</ListItem> 
     ); 
     })} 
     </List> 
    ); 
    } 
} 

Но тогда я получаю эту ошибку: Cannot read property 'map' of undefined. Cannot read property '__reactInternalInstance$pnbhyoz0ysdjwgvypz8q9qkt9' of null

Answer 1

Вы можете сделать это

{this.props.data !== undefined? this.props.data.map(){}: null} 

Answer 2

Я использую getDefaultProps метод.

В вашем случае это будет примерно так:

getDefaultProps: function() { 
     return { 
      data: { 
       days: [] 
      } 
     }; 
    }, 

Вы можете прочитать больше об этих методах here.

Update:

Спасибо за комментарии, вот мой обновленный ответ на ES6. Если вы используете ES6, я предполагаю, что это должно выглядеть следующим образом: метод

class SingleCompetition extends React.Component { 

    static defaultProps = { 
    data: { days: ['monday', 'tuesday'] }, 
    } 

    render() { 
    return (
     <ul> 
      {this.props.data.days.map(function(day){ 
       return <li>{day}</li>; 
      })} 
     </ul> 
    ); 
} 

React.render(<SingleCompetition />, document.body); 

Answer 3

render() { 

return (
    <List> 
    {this.props.data !== undefined ? this.props.data.days.map(function(item){ 
     return (
     <ListItem>Hej</ListItem> 
     ); 
     }) 
    : null} 
    </List> 
); 
} 

Answer 4

DAN-cantir, используя getDefaultProps, вероятно, самый мягкий способ. Если вы используете классы ES6:

class MyComponent extends Component { 
    ... 
} 

MyComponent.defaultProps = { 
    data: { 
     days: [] 
    } 
} 

Или, используя апатридов функциональные компоненты:

function MyComponent({ data = { days: [] } }) { 
    ... 
}