React Native: отображение через смонтированное ненулевое значение

Question

Компонент настроен таким образом, что он монтируется, а затем ему присваивается значение, когда я пытаюсь использовать его в моем рендеринге, для первого монтирования он равен нулю, прежде чем ему будет присвоено значение. Но мне нужно отобразить массив, который я получаю, поэтому я проверяю, является ли значение нулевым, а если нет, то я сопоставляю ... но, похоже, происходит сбой приложения.

class EventCalendar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
        };

        this.handleGetEvents = this.handleGetEvents.bind(this);
    }

    componentWillMount() {
        this.handleGetEvents();
    }

    handleGetEvents() {
        this.props.getEvents();
    }

    render() {
        const { events } = this.props;
        console.log(events);
        return (
            ...                    {events ?
                                    <ScrollView>
                                        {events.map((event, index) => (
                                            <TouchableOpacity key={index} onPress={() => this.props.navigation.navigate('Event', event)}>
                                                <View style={{ alignItems: 'center', marginLeft: 15, marginRight: 15, paddingRight: 15, borderColor: '#ddd', borderWidth: 1 }}>

                                                    ...
                                                            </View>
                                                        </View>
                                                    </View>
                                                </View>
                                            </TouchableOpacity>
                                        ))}
                                    </ScrollView>
                                    : []
                                };
                            ...
        );
    }
}

Answer 1

Что сказал другой парень, но вместо того, чтобы использовать троичную, почему бы просто не пойти:

{!!events && events.map ...

но также вместо проверки на достоверность событий, почему бы не проверить явно, если это массив или нет с:

{Array.isArray(events) && ...

РЕДАКТИРОВАТЬ: Разработка для пользователя:

{Array.isArray(events) &&
  <div>
     {events.map(event => <span>{event.name}</span>)}
  </div>
}

Answer 2

{events == null ? <ScrollView></ScrollView>:
                                <ScrollView>
                                    {events.map((event, index) => (
                                        <TouchableOpacity key={index} onPress={() => this.props.navigation.navigate('Event', event)}>
                                            <View style={{ alignItems: 'center', marginLeft: 15, marginRight: 15, paddingRight: 15, borderColor: '#ddd', borderWidth: 1 }}>

                                                ...
                                                        </View>
                                                    </View>
                                                </View>
                                            </View>
                                        </TouchableOpacity>
                                    ))}
                                </ScrollView>} 

Answer 3

Попробуйте удалить точку с запятой и конец ...

Итак ...

</ScrollView>
: []
};

становится ...

</ScrollView>
: []
}