Как получить данные из SWAPI в React - PullRequest
Новая
       18

Как получить данные из SWAPI в React

0 голосов
/ 26 декабря 2018

Нужно сделать более одной выборки в SWAPI

Я хочу показать информацию о фильмах и видах персонажей.Мне удалось сделать начальную выборку, которая дает мне названия и URL-адреса для видов и фильмов, но я не понимаю, как сделать эти шоу в виде строк в моем CardComponent

https://scrimba.com/c/cDrN9Tb ->Я продублировал свой проект в этой скримбе.Пожалуйста, проверьте это.

Компонент приложения 

    class App extends Component {
      constructor(props) {
        super(props)
        this.state = {
          data: [],
          films: [],
          species: '',
        }

      }

      componentDidMount() {
        const url = 'https://swapi.co/api/people/';

        fetch(url)
          .then(response => response.json())
          .then(people => this.setState({ data: people.results }));

        }



      render() {
        const { data } = this.state;
        return (
          <div className='App'>
              <NavBar />
              <Header />
              {
                data.length === 0
                ? <h3>Loading Cards...</h3>
                : <h3>Cards Count: {data.length}</h3>
              }
              <CardContainer data={data} />
          </div>
        );
      }
    }

Компонент карты 

    const CardComponent = ({ name, species, films }) => {

      return (
        <div className='Card'>
          <h3>{ name }</h3>
          <h4 style={{fontStyle: 'italic'}}>The species.name value should be shown below... not the url</h4>
          <h4>{ species }</h4>
          <div>Featured in:
            <p style={{fontStyle: 'italic'}}>(movie titles should be show in the list below, not the urls...)</p>
              <ul>
                {films.map((film, i) => (
                  <li key={i}>
                    { film }
                  </li>
                ))}
              </ul>
          </div>
        </div>
      )
    }

Я новичок в этом и не могу найти решение,Прочитайте все записи, относящиеся к swapi-реагировать, которые я смог найти, но все равно не удалось решить эту проблему.Пожалуйста, будьте терпеливы с этим усталым мозгом = P

- РЕДАКТИРОВАТЬ ---

Проблема видов решена благодаря SakoBu

1 Ответ

0 голосов
/ 27 декабря 2018

Быстрое и грязное решение ... Измените свой компонент карты на это, и вы получите виды, появляющиеся, как вы хотите ... 

import React from 'react';

export default class CardComponent extends React.Component {
  state = { species: '' };
  componentDidMount() {
    fetch(this.props.species[0])
      .then(response => response.json())
      .then(json => this.setState({ species: json.name }));
  }
  render() {
    return (
      <div className="Card">
        <h3>Name: {this.props.name}</h3>
        <h4 style={{ fontStyle: 'italic', color: 'red' }}>
          The species.name value should be shown below... not the url
        </h4>
        <h4>Species: {this.state.species}</h4>
      </div>
    );
  }
}
...