Question

我需要在每个人卡中显示来自swapi.co的电影标题

import React, {useEffect} from 'react';
import './App.css';

const App = () => {
  const [person, setPerson] = React.useState([]);
  const [films, setFilms] = React.useState([]);

  useEffect(() =>{
    fetchData('https://swapi.co/api/')
      .then(res => {
        fetchData(res.people).then(people => setPerson(people.results));
        fetchData(res.films).then(films => setFilms(films.results));
      });
  }, [])


  async function fetchData(url) {
    const response = await fetch(url);
    return response.json();
};

  return(
    <>
      {person.map(item => ( 
        <div key={item.url}>{item.name}
          <ul>
            {item.films.map(el => (
              <li>
                {el}
            </li>
            ))}                    
          </ul>
        </div>
      ))}

    </>
  )
}

export default App;

我不知道该怎么做，因为在渲染方法中，“ item.films”以带有链接的arr返回。我如何更改电影标题的链接？

Answer 1

films.map（）按顺序返回所有电影标题。我只需要在返回电影标题时角色存在例如当我们得到https://swapi.co/api/people/1 回应是

"name": "Luke Skywalker",
    "height": "172",
    "mass": "77",
    "hair_color": "blond",
    "skin_color": "fair",
    "eye_color": "blue",
    "birth_year": "19BBY",
    "gender": "male",
    "homeworld": "https://swapi.co/api/planets/1/",
    "films": [
        "https://swapi.co/api/films/2/",
        "https://swapi.co/api/films/6/",
        "https://swapi.co/api/films/3/",
        "https://swapi.co/api/films/1/",
        "https://swapi.co/api/films/7/"
    ],

我想将电影链接更改为每个角色的电影标题

Answer 2

我知道它的回复很晚，但也许对某人有帮助。提取角色数据后，您需要映射到角色的电影，并且由于它们是链接，因此必须获取每个api来获取电影，然后从中提取所需的数据。

swapi-demo

Swapi在peopels卡中获取和渲染影片

2 个答案: