React Native：通过挂载的非空值进行映射答案

【问题标题】：React Native: mapping though a mounted non-null valueReact Native：通过挂载的非空值进行映射
【发布时间】：2018-09-07 12:43:27
【问题描述】：

组件以一种安装方式设置，然后在我尝试在渲染中使用它时分配一个值，在分配值之前第一次安装它为空。但我需要通过我得到的数组进行映射，所以我检查该值是否为 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>
                                    : []
                                };
                            ...
        );
    }
}

【问题讨论】：

标签： reactjs react-native react-redux

【解决方案1】：

别人说的，还不如用三元，何不干脆去：

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

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

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

编辑：为用户详细说明：

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

【讨论】：

@user1803096 你能详细说明并显示更多代码吗？

【解决方案2】：

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

所以...

</ScrollView>
: []
};

变成……

</ScrollView>
: []
}

【讨论】：

【解决方案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>}

【讨论】：

这里：事件 == null ？：可以替换为： events == null ?空：