TypeError：无法读取未定义的 React Native 的属性“地图”答案

【问题标题】：TypeError: Cannot read property 'map' of undefined React NativeTypeError：无法读取未定义的 React Native 的属性“地图”
【发布时间】：2021-01-22 16:04:37
【问题描述】：

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

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}
      );
    }
  }
}

错误是TypeError: Cannot read property 'map' of undefined 未定义的对象在第 42 行。我尝试了componentWillMount 和其他几个迭代。我真的很难在这里找到解决方案。

【问题讨论】：

为什么你的 console.log 中有大括号？如果您 console.log responseJson.terms，它是否显示了它要显示的内容？一个数组？
我在跑步时得到undefined。 console.log (responseJson.terms)
这意味着您正在尝试映射不存在的东西。记录responseJson 并从中设置您需要的内容，但terms 似乎未定义。然后参考@Kerchik 的回答。
您能分享您收到的responseJson 对象吗？首先你必须正确设置响应状态，我们稍后会处理第二个错误。
我会添加一个答案。

标签： json reactjs react-native api

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您无法映射响应的原因是因为您没有收到能够映射它的数组（您只能将 .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添加了一个额外的检查，虽然这只是我个人喜欢做的事情，你可以删除它。

这样尝试，然后告诉我是否有效。

【讨论】：

非常感谢您完美运行！虽然我需要调整dataSource 以反映正确的信息。再次感谢您

【解决方案3】：

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

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

希望它对你有用。

【讨论】：