类型错误:无法读取未定义 React Native 的属性“map”

时间:2021-01-22 16:04:37

标签: json reactjs react-native api

我正在尝试使用 axios 调用 API 数据。 我收到了 console.log 的响应。虽然屏幕上没有显示响应。真的坚持这个。

[Reflection.Assembly]::LoadWithPartialName("Microsoft.AnalysisServices")
    
 $ServerName = "asazure://westus.asazure.windows.net/abc:rw"
 $DB = "adventureworks" 
    
 $Server = New-Object Microsoft.AnalysisServices.Server
 $Server.Connect($ServerName)
    
 $Database = $Server.Databases.Item($DB)
    
 foreach ( $roles in $Database.Model.Roles) {
     #Write-Output $roles.Name
     foreach ( $role in $roles) {
     Write-Output $role.Name
     Write-Output "----------------------"
     foreach ( $member in $roles.Members) {
          "Member Name: "  + $member.Name
         }
         Write-Output "`n"
       }
 }

错误是 export default class PrivacyPolicyScreen extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, dataSource: null, } } componentDidMount () { return fetch ('API', { method: 'GET', headers:{ 'Content-Type': "application/json", 'x-api-key': 'KEy' }, }) .then( (response)=> response.json() ) .then ( (responseJson) => { console.log ("This is the response that should be in the app", {responseJson}) this.setState({ isLoading: false, dataSource: responseJson.terms, }) }) .catch((error) => { console.log(error) }) }; render () { if (this.state.isLoading){ return ( <Text >Loading Privacy!!!!</Text> ) } else { let privpolicy = this.state.responseJson.map((val, key ) => { return <View key={key}> <Text >{val.dataSource}</Text> </View> }) return ( {privpolicy} ); } } } 未定义的对象在第 42 行。我尝试了 TypeError: Cannot read property 'map' of undefined 和其他几次迭代。我真的很难在这里找到解决方案。

3 个答案:

答案 0 :(得分:2)

您正在映射 responseJson 属性,该属性在状态中不存在。如果我理解正确,您将响应数据存储到 dataSource,因此您的地图操作应如下所示:

let privpolicy = this.state.dataSource.map((val, key ) => {}

答案 1 :(得分:1)

看起来您使用了错误的变量,甚至没有在状态声明中定义。我建议您按如下方式更改渲染部分

   let privpolicy = this.state.dataSource.map((val, key ) => {
      return <View key={key}>
        <Text >{val.dataSource}</Text>
      </View>
    })

希望它对你有用。

答案 2 :(得分:1)

无法映射响应的原因是因为您没有接收到能够映射它的数组(您只能将 .map 与数组一起使用)。

因此,根据您的回答判断,您将收到一个字符串(文本),然后您想要显示该字符串。为此,您必须执行以下操作:

componentDidMount () {
    return fetch ('API', {
      method: 'GET',
      headers:{
        'Content-Type': "application/json",
        'x-api-key': 'KEy'
    },
    })
    .then( (response)=> response.json() )
    .then ( (responseJson) => {
      console.log ("This is the response that should be in the app", {responseJson})
      this.setState({
        isLoading: false,
        dataSource: responseJson,
      })
    })
    .catch((error) => {
      console.log(error)
    })
  };

    render () {
      if (this.state.isLoading) {
        return (
          <Text >Loading Privacy!!!!</Text>
        ) 
      } else if (this.state.dataSource) { 
        return (
          <View>
            <Text>{this.state.dataSource}</Text>
          </View>
        )
      }
      return null;
}

我还为 this.state.dataSource 添加了额外的检查,虽然这只是我个人喜欢做的事情,但您可以将其删除。

尝试一下,然后告诉我是否可行。