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

Question

所以我试图在 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',
                            padding: 5,
                            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,
                                borderRadius: 5,
                                backgroundColor: '#202B35',
                                padding: 5,
                                flexDirection: 'row',

                                marginHorizontal: scale(100),
                            }}
                        >
                            <Text
                                style={{
                                    padding: 4,
                                    fontSize: scale(12),
                                    textAlign: 'center',
                                    color: this.get_color(this.props.status),
                                    fontWeight: 'bold',
                                }}
                            >
                                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

Answer 1

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

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