Question

我正在尝试在react native中显示项目的详细信息

首先，我正在使用一个api使用json的不同数据：

class ListScreen extends React.Component {
constructor() {
    super();

    this.state = {
        dataSource: [],
    };
    this.getRemoteData();
}
static navigationOptions = {
    title: 'Home',
};

getRemoteData = () => {
    const url = "https://***";
    fetch(url)
    .then(res => res.json())
    .then(res => {
        this.setState({
            data: res.records
        });
    })
    .catch(error => {
        console.log("get data error from:" + url + " error:" + error);
    });
};

然后我正在使用功能导航来显示每个项目的特定细节

renderNativeItem = (item) => { 
    return <ListItem
    roundAvatar
    subtitle={item.fields.station_name}
    onPress={() => this.onPressItem(item)}
    />;
}

onPressItem = (item) => {
    this.props.navigation.navigate('Detail', {item: item})
}

最后，我正在尝试显示不同的数据但是对于经度和纬度，我遇到了一个问题，不知道如何解决（“未定义不是对象）

render() {
    return (
        <View>
        <FlatList
        data={this.state.data}
        renderItem={({item}) => this.renderNativeItem(item)}
        />
        </View>
        );
    }
}

class DetailScreen extends React.Component {

    render() {
        const item = this.props.navigation.state.params.item;
        return (
            <View style={styles.container}>

            <MapView style={styles.map}
            initialRegion={{
                latitude:item.geometry.coordinate[0] ,      // don't work
                longitude: item.geometry.coordiante[1] ,    // don't work
                latitudeDelta: 0.0,
                longitudeDelta: 0.0,
            }}
            >
            <MapView.Marker
            coordinate={{latitude: ,
                longitude: }}
                title={"title"}
                description={"description"}
                />
                </MapView>
                 <Text style={styles.text}>name: {item.fields.nbebike}</Text>   //work

                <Button title="Home" onPress={this._goHome} />
                </View>
                );
            }

感谢您的帮助：）

Answer 1

您正在data上设置状态，但是在您定义的dataset上的构造函数上

你不是应该做的事吗

getRemoteData = () => {
    const url = "https://***";
    fetch(url)
    .then(res => res.json())
    .then(res => {
        this.setState({
            dataset: res.records
        });
    })
    .catch(error => {
        console.log("get data error from:" + url + " error:" + error);
    });
};

那么您在打电话时会得到undefined

 <View>
  <FlatList
    data={this.state.data}
    renderItem={({item}) => this.renderNativeItem(item)}
   />
 </View>

因为this.state.data从未被声明。

如何添加经度和纬度的值

1 个答案: