React Native：通过挂载的非null值进行映射

Question

组件以其安装的方式设置，然后在我尝试在我的渲染中使用它时为其分配值，在为其分配值之前，第一次安装它为null。但是我需要通过我得到的数组进行映射，所以我检查该值是否为null，如果没有，我映射..但它似乎使应用程序崩溃。

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

尝试删除分号和结束...

所以...

</ScrollView>
: []
};

成为...

</ScrollView>
: []
}

Answer 2

对方说的是什么，但也没有使用三元，为什么不去：

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

而且不是测试事件的真实性，为什么不明确地测试它是否是一个数组：

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

编辑：为用户精心制作：

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

Answer 3

{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>}