Ошибка типа: не удается прочитать свойство ‘map’ неопределенного React Native

#json #reactjs #react-native #api

#json #reactjs #react-native #API

Вопрос:

Я пытаюсь вызвать данные API с помощью axios. Я получаю ответ с помощью 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 и несколько других итераций. Я действительно пытаюсь найти решение здесь.

Комментарии:

1. Почему в вашем console.log есть фигурные скобки? Если вы console.log responseJson.terms , показывает ли он то, что он должен показывать? Массив?

2. Я получаю undefined при запуске. console.log (responseJson.terms)

3. Это означает, что вы пытаетесь сопоставить что-то, чего не существует. Войдите в responseJson систему и установите, что вам нужно от него, но terms , похоже, оно не определено. Затем обратитесь к ответу @Kerchik.

4. Можете responseJson ли вы поделиться получаемым объектом? Сначала вы должны правильно настроить ответ на состояние, со второй ошибкой мы разберемся позже.

5. Я добавлю ответ.

Ответ №1:

Вы сопоставляете свойство responseJSON, которое не существует в состоянии. Если я правильно понял, вы сохранили данные ответа в DataSource, поэтому ваша операция map должна выглядеть следующим образом:

 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 , хотя это то, что мне лично нравится делать, вы можете удалить его.

Попробуйте так и скажите мне, работает ли это.

Комментарии:

1. Большое вам спасибо, что работает отлично! Хотя мне нужно было настроить dataSource , чтобы отразить правильную информацию. Еще раз спасибо

Ответ №3:

Похоже, вы используете неправильную переменную, которая даже не определена в объявлении состояния.Я бы посоветовал вам изменить часть рендеринга следующим образом

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

надеюсь, это сработает для вас.