Моя проблема в том, что мой код возвращает неопределенное значение из-за моего второго вызова API:
render(){
const result_postid = this.state.data_one.map(function(val) {
return val.postid;
}).join(',');
const result_spaceid = this.state.data_one.map(function(vall) {
return vall.spaceid;
}).join(',');
//These two will receive values.
const result_image = this.state.data_two.map(function(valll) {
return valll.image;
}).join(',');
//This last one somehow will not receive value
}
Здесь я получаю два API из одного и того же componentDidMount:
componentDidMount(){
//First API Call
fetch(`http://www.exmaple.com/React/data.php`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
data_one: responseJson,
},function() {
});
}).catch((error) => {
console.error(error);
});
// Second API Call
fetch(`http://www.example.com/React/image_data.php`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
}).then((response) => response.json())
.then((responseJson) => {
this.setState({
data_two: responseJson,
},function() {
});
}).catch((error) => {
console.error(error);
});
}
Чтобы подтвердить, что это была не просто проблема с ответом на данные, я удалил первый из const (result_postid) и (result_spaceid), и ошибка исчезла (TypeError: undefined is not a function (evaluating 'this.state.data_two.map(function(valll){return valll.image}')). Данные отображаются успешно, но мне нужно, чтобы все 3 const вернули значение. Есть ли способ вернуть все значения для всех 3 const?

Вызовы API являются асинхронными, когда вы используете значения в функции рендеринга, некоторые из них не существуют до тех пор, пока все вызовы не вернутся. У вас должно быть начальное состояние в конструкторе
constructor(props) {
super(props);
this.state = {
data_one: [],
data_two: []
}
}
Таким образом, значения не могут быть неопределенными. Когда API возвращает значение, setState снова запускает рендеринг.
Кроме того, почему у вас есть пустая функция в setState в обратных вызовах?
Должно получиться что-то вроде
this.setState({
data_two: responseJson,
});
Пара рекомендаций:
componentDidMount вы просто вызываете функцию, чтобы сделать запрос.
Это сработало, спасибо вам большое! Что касается этого вопроса, я действительно не знаю, почему он у меня есть, он был там из предыдущего ответа на вопрос, и я поднял его. Я новичок в React Native. Я также сделаю больше camelCasing и перенесу вызовы API в разные файлы. Еще раз спасибо! @CarolinaAguilar