将自定义组件呈现为列表项

如何解决将自定义组件呈现为列表项

所以我试图在React-Native的特定屏幕上呈现过滤的数据列表。

我遇到了一个问题

Error: Objects are not valid as a React child (found: object with keys {_40,_65,_55,_72})

但是，如果我使用常规的<Text/>元素进行渲染，则效果很好。

我认为在平面列表或地图函数中呈现自定义组件方面我还不太了解

这是我的FlatList的样子：

<FlatList
      vertical
      style={{ backgroundColor: "#376772" }}
      keyExtractor={(crossing) => crossing.stop_id}
      data={props.crossings_fav}
      renderItem={( {item} ) => {
     
         return <CrossingCell
            func={() => {
              props.navigation.navigate("Crossing",{
                crossing: item,});
            }}
            name={item.stop_name}
            status={item.stop_status}
            is_fav={item.is_fav}
          ></CrossingCell>
      }}
    />

CrossingCell.js：

    class CrossingCell extends PureComponent {
    get_color = (v) => {
        switch (v) {
            case 'clear':
                return `#5cb85c`

            case 'busy':
                return `#f0ad4e`

            case 'stop':
                return `#d9534f`
        }
    }

    get_icon = (v) => {
        switch (v) {
            case 'clear':
                return `ios-checkmark`

            case 'busy':
                return `md-warning`

            case 'stop':
                return `ios-close`
        }
    }

    get_fav_icon = (v) => {
        const ico = v == true ? `ios-star` : `ios-star-outline`

        return ico
    }
    render() {
        return (
            <TouchableOpacity
                onPress={() => {
                    this.props.func()
                }}
            >
                <View
                    style={{
                        backgroundColor: this.get_color(this.props.status),margin: 5,borderRadius: 5,padding: 5,justifyContent: 'center',alignItems: 'center',borderColor: '#202B35',borderWidth: 1,}}
                >
                    <Text
                        numberOfLines={2}
                        style={{
                            textAlign: 'center',fontSize: scale(15),fontWeight: 'bold',color: '#fff',}}
                    >
                        {this.props.name}
                    </Text>

                    <View
                        style={{
                            margin: 5,flexDirection: 'row',}}
                    >
                        <Icon
                            name={this.get_fav_icon(this.props.is_fav)}
                            type="ionicon"
                            color="yellow"
                        />
                        <View
                            style={{
                                margin: 5,backgroundColor: '#202B35',marginHorizontal: scale(100),}}
                        >
                            <Text
                                style={{
                                    padding: 4,fontSize: scale(12),textAlign: 'center',color: this.get_color(this.props.status),}}
                            >
                                Status : {this.props.status}
                            </Text>
                            <Icon
                                name={this.get_icon(this.props.status)}
                                type="ionicon"
                                color={this.get_color(this.props.status)}
                                containerStyle={{ marginLeft: scale(5) }}
                            />
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
export default CrossingCell

解决方法

这是因为在某个地方（我想在您的自定义组件的文本中）您正在绘制一个地图，其中JSX需要一个字符串。

请确保您的props.stop_status不是对象，而只是字符串。如果它是字符串，则必须检查JSX中要包括的所有变量。