Как пройти через многомерный массив из API с помощью Reactjs
После многих попыток я не могу использовать массивы из https://swapi.co/api/ Я хочу использовать данные людей и фильмов.
У меня есть 2 файла: App.js
import React, { Component } from "react";
import List from './List';
const API = 'https://swapi.co/api/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
const response = await fetch(API);
const json = await response.json();
this.setState({
data: json.data
});
};
render() {
return (
<List data = {this.state} />
);
}
}
List.js
import React, { Component } from 'react';
import Person from './Person';
class List extends Component {
render() {
const { data } = this.props;
const { results } = data;
return (
<div className = "flex-grow-1">
<div className = "row mb-5">{results}</div>
</div>
);
}
}
export default List;
Итак, как мне просмотреть этот массив, чтобы получить данные, которые я хочу отобразить? Я хотел бы отображать людей -> результаты и фильмы -> результаты
Спасибо за ответ, я все еще понимаю, что results не определено, когда я это делаю <List data = {this.state.data} />
Кажется, я понимаю, о чем вы спрашиваете. Ниже написал ответ
Ответы 2
Таким образом, этот код в том виде, в каком он есть сейчас, будет извлекать один объект, который действует как карта других URL-адресов для сущностей в этом API. то, что вы хотите сделать, это изменить fetchData, чтобы он принимал URL-адрес. В этот момент вы можете сделать первоначальный запрос к /api, прочитать URL-адрес из результата для people и films и снова вызвать fetchData с этими URL-адресами. Полученные данные можно сохранить внутри состояния.
Пример реализации componentWillMount() и fetchData():
componentWillMount() {
this.fetchData('https://swapi.co/api/')
.then(res => {
this.fetchData(res.people).then(people => alert(JSON.stringify(people)));
this.fetchData(res.films).then(people => alert(JSON.stringify(people)));
});
}
async fetchData(url) {
const response = await fetch(url);
return response.json();
};
Самое важное изменение заключается в том, что fetchData теперь возвращает обещание. Это позволяет нам использовать метод then для использования результата первого запроса. Вы можете заменить alert реализацией setState для себя.
Я изо всех сил пытаюсь заставить его работать, я сделал jsfiddle с кодом: jsfiddle.net/75fspc1j/1 Как я могу использовать people.results в моем компоненте <List />?
results будет неопределенным, поскольку результаты не являются узлом в вашем объекте данных... попробуйте удалить строку const {results} = data и в карте возврата массив данных:
return (
<div className = "flex-grow-1">
{
data.map((results, i) => {
return (<div key = {i} className = "row mb-5">{results}</div>);
})
}
</div>
);
- вам понадобится ключ, чтобы избежать предупреждения уникального ключа React
Когда вы визуализируете компонент
<List />, вы передаете реквизит данных какdata = {this.state}, поэтому в<List />this.props.data будет{ data: [{jsondata}] }. Вам нужно будет либо передатьdata = {this.state.data}компоненту, либо деконструировать какconst { data: { data } } = this.props