#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>
})
надеюсь, это сработает для вас.