如何在 React 中从 SWAPI 检索数据

Question

需要多次提取 SWAPI

我想显示角色的电影和物种信息。我设法进行了初始提取，这为我提供了物种和电影的名称和 url，但无法理解如何在我的 CardComponent

中将这些显示为字符串

https://scrimba.com/c/cDrN9Tb -> 我在这个 scrimba 中复制了我的项目。请检查一下。

应用组件

    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-react 相关条目，但仍然无法解决这个问题。请耐心等待这个疲惫的大脑=P

--编辑---

Species problem solved thanks to SakoBu

Answer 1

快速而肮脏的解决方案...将您的卡片组件更改为此，您将根据需要显示物种...

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>
    );
  }
}

如何在 React 中从 SWAPI 检索数据

How to retrieve data from SWAPI in React

fetch

reactjs

fetch-api