Question

由于它被问过很多次，所以我真的很想阅读StackOverflow上的全部内容，但是我找不到我的错误的解决方案。

永久违反：对象作为React子对象无效（找到：具有键{id，title，desc，location，distance}的对象）。

我假设此文件中有问题，不确定您是什么...

PointOfInterestCluster.js

import React from 'react'
import { Text, View, TouchableOpacity,TouchableWithoutFeedback, ScrollView } from 'react-native'
import Styles from '../../constants/Styles';

export default class PointOfInterestCluster extends React.Component {

constructor(props) {
    super(props)

    this.state = {
        data: this.props.data,
    }

    this.onMarkerPress = this.props.onMarkerPress.bind(this);
}

renderMarkers = (item, index) => {
    console.log(item, index);
    return (
        <TouchableOpacity onPress={() => this.onMarkerPress(item)} key={'markerslist_'+index}>
            <View  style={[Styles.borderBottom, Styles.borderLight, Styles.padding]}>
                <Text style={[Styles.text, Styles.textBold, Styles.textDark]}>{item.title}</Text>
            </View>
        </TouchableOpacity>
    )
}


render() {

return (

    <TouchableWithoutFeedback>
        <View>
            <ScrollView>
                <Text style={[Styles.label, Styles.padding, Styles.borderBottom]}>
                    {this.props.data.length} enheter
                </Text>
            </ScrollView>

            {this.state.data.map((item, index) => {this.renderMarker(item, index)})}
        </View>
    </TouchableWithoutFeedback>

);
}}

PointOfInterestCluster被称为喜欢：

{this.state.currentCluster || this.state.currentMarker &&

                <Overlay onClose={this.onCloseOverlay}>

                    {this.state.currentCluster &&
                        <PointOfInterestCluster onMarkerPress={this.onMarkerPress} data={this.state.currentCluster} poi={this.state.currentPOI}/>
                    }

                    {this.state.currentMarker &&
                        <PointOfInterest data={this.state.currentMarker} poi={this.state.currentPOI} />
                    }

                </Overlay>
            }

Answer 1

在以下行中：

{this.state.data.map((item, index) => {this.renderMarker(item, index)})}

您实际上并没有从map函数返回任何内容，因为在this.renderMarker调用周围有花括号。 renderMarker被调用，但其结果被忽略。

您可以将其更改为以下三种等效方法之一，它们都是等效的： 1.

1.
this.state.data.map((item, index) => {
  return this.renderMarker(item, index);
});

2.
this.state.data.map((item, index) => this.renderMarker(item, index)})

3.
this.state.data.map(this.renderMarker)

如果问题仍然存在，请尝试打印数据的形状并将其附加在此处。

React native：对象作为React子对象无效

1 个答案: