javascript - 根据ID显示具体数据

Question

以下代码显示来 self 的数据 API 的标记列表，在单击标记时，它会使用用户单击的标记的 ID 设置 selectedMarker 状态。

getPosts() {
    axios
      .get("mydataAPI")
      .then(response => {
        this.setState({
          posts: response.data.response
        });
      });
  }

///This code is then returned to the user with MapView to display a list of markers on map, when a user clicks a marker the ID of that marker is stored in state ///

 {this.state.posts.map((user, index)=> {
       return (
        <MapView.Marker key={user.ID} coordinate={{latitude: user.lat, longitude: user.lng}} onPress={() => {this.setState({selectedMarker: user.ID})}}  title={user.category} description={Moment(user.post_date).fromNow(), user.category, user.address} image={require('../images/yes.png')}/>
          );
                 })}

//// will display ID of marker user selected ////

{ this.state.selectedMarker }

现在我已将标记 ID 保存为状态，如何使用 .map 函数根据其 ID 显示有关该特定标记的信息？

Answer 1

您可以使用 lodash npm 包。

在 <MapView onPress={() => {showUserDetails(user.ID)} /> 上添加功能

import {
    findIndex
} from 'lodash';

constructor(props){
    super(props);
    this.state = {
    Index: -1
  }
}

showUserDetails = (id) => {
let Index = findIndex(this.state.posts, {
        'ID': id
    });
this.setState({Index});
}

然后在渲染方法中:

{this.state.Index !== -1 ? (
   <Text>this.state.posts[this.state.Index].ID</Text>
   <Text>this.state.posts[this.state.Index].lat</Text>
   <Text>this.state.posts[this.state.Index].lng</Text>
) : null}

如果它不起作用，请告诉我 this.state.posts 中的数据。