如何在 React Native 中的对象中获取特定值？

Posted 2023-02-21

【中文标题】如何在 React Native 中的对象中获取特定值？

【英文标题】：How to get a specific value in an Object in React Native?

【发布时间】：2020-10-14 17:34:52

【问题描述】：

我目前正在使用 React Native 和 iTunes 的搜索 API 编写我的第一个应用程序。

我放了一个 TextInput 和一个 Button，它返回与文本对应的所有专辑。点击相册后，它会获取其唯一 ID 并搜索此相册的详细信息。

export function getAlbumDetailFromApi(id)

  return fetch('https://itunes.apple.com/lookup?id='+id)
  .then((response) => response.json())
  .catch((error) => console.log(error));

这是课程：

class AlbumDetail extends React.Component 
  constructor(props) 
    super(props)
    this.state = 
      album: undefined,
      isLoading: true
    
  

  componentDidMount() 
    console.log(this.props.navigation.state.params.idAlbum)
    getAlbumDetailFromApi(this.props.navigation.state.params.idAlbum).then(data => 
      this.setState(
        album: data,
        isLoading: false
      )
    )
  

  _displayLoading() 
    if (this.state.isLoading) 
      return (
        <View style=styles.loading_container>
          <ActivityIndicator size='large' />
        </View>
      )
    
  

  _displayFilm() 
    const  album  = this.state

    console.log(album.results.artistId)
    console.log()
    if (album != undefined) 
      return (
        <ScrollView style=styles.scrollview_container>
          <Text style=styles.title_text>name of the album should go here</Text>     
        </ScrollView>
      )
    
  

  render() 
    return (
      <View style=styles.main_container>
        this._displayLoading()
        this._displayFilm()
      </View>
    )
  

如果我的专辑 ID 是“1474669063”，该函数将返回：

API's response

但这是我的问题。也许它超级简单，但我已经尝试了我找到的所有东西，但我无法访问数据......

有人可以帮帮我吗？

【问题讨论】：

错误是什么？

@GauravRoy 它说'未定义不是一个对象（评估'album.results'）

请不要在标题中添加“SOLVED”。当一个答案被接受时，它会自动将问题标记为已解决，因此不需要在标题中使用它。

【参考方案1】：

抓取：

  getAlbumDetailFromApi(id) 
    return fetch('https://itunes.apple.com/lookup?id='+id)
      .then(response => response.json())
      .then(data => 
        // set the state here, we access the first object of the results array with data.results[0
        this.setState(album: data.results[0])
        )
    .catch((error) => console.log(error));
  

渲染方法：

componentDidMount() 
    this.getAlbumDetailFromApi(1474669063);
  
  renderAlbum() 
    // if we have an album display it 
    if (this.state.album) 
      return (
        <View>
        <Text> Arist: this.state.album.artistName</Text>
        <Text> Release Date: this.state.album.releaseDate</Text>
        </View>
      );
    
    
  
  render() 
    console.log('state', this.state);
    return (
    <View style=styles.container>
        this.renderAlbum()
    </View>
  );
  

演示

https://snack.expo.io/aKlDZLLbF

【讨论】：

@nicvlas 不客气。请接受我的答案（通过单击我的答案旁边的复选图标）并投票（通过按我的答案旁边的“^”）。谢谢

【参考方案2】：

问题出在函数getAlbumDetailFromApi。

它不返回响应。它正在返回promise。

考虑到您的代码，您应该使用async/await 并仅返回响应。所以，你的setState 有数据部分。

export async function getAlbumDetailFromApi(id) 
  try 
    const response = await fetch('https://itunes.apple.com/lookup?id=' + id);
    return response.json();
   catch (error) 
    console.log(error);
  

【讨论】：

感谢您的帮助！但是现在，您知道我如何访问“结果”中的数据吗？我总是得到'未定义不是对象'谢谢:)