Proyek bereaksi pasir kotak

Jadi saya punya daftar ID film yang ditampilkan yang diambil dari API. Saya juga dapat menelepon titik akhir API lain untuk mendapatkan tautan penyedia film tetapi menggunakan ID film sebagai parameter dalam panggilan pengambilan lain. Saya dapat menampilkan salah satu tautan film ID. Seperti yang dapat Anda lihat di kotak pasir ini di browser saya dapat mengembalikan satu tautan. Tapi saya perlu sisa tautan yang termasuk dalam id film lainnya. Masalahnya membuat ini bekerja, saya hanya dapat menampilkannya.
Saya menaruh kode di bawah tetapi saya sarankan memeriksa kotak pasir untuk melihat apa yang saya maksud.


    import "./styles.css";
    import React, { useEffect, useState } from "react";
    import { render } from "react-dom";
    
    const getMovieDetail = (movieId) => {
      const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;
      return fetch(url);
    };
    
    function MovieDetail(props) {
      const [movie, setMovie] = useState(null);
      const { id } = props;
    
      useEffect(() => {
        getMovieDetail(id)
          .then((res) => res.json())
          .then((res) => setMovie(res.results.US.link));
      }, [id]);
    
      return movie ? (
        <code>{JSON.stringify(movie)}</code>
      ) : (
        <p>Probably fetching data</p>
      );
    }
    
    export default function App() {
      const [trending, setTrending] = useState([]);
    
      //set movieID to get the movie ID's
    
      //set link to get the providerlink that belongs to each movieID.
    
      useEffect(() => {
        const trendUrl =
          "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
        fetch(trendUrl)
          .then((response) => response.json())
          .then((data) => {
            setTrending(data.results);
          })
          .catch((error) => {
            console.log("Error!! Data interupted!:", error);
          });
      }, []);
    
      const moviesIdCollections = trending.map((item) => item.id);
    
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <MovieDetail id={moviesIdCollections} />
          {moviesIdCollections.map((elm) => (
            <p key={elm}>{elm}</p>
          ))}
        </div>
      );
    }

0
Alex Smith 5 April 2021, 04:49

2 jawaban

Jawaban Terbaik
import "./styles.css";
import React, { useEffect, useState } from "react";
import { render } from "react-dom";

const getMovieDetail = (movieId) => {
  const url = `https://api.themoviedb.org/3/movie/${movieId}/watch/providers?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95`;

  return fetch(url);
};

function MovieDetail({id}) {
  const [movie, setMovie] = useState(null);

  useEffect(() => {
    console.log(id);
    getMovieDetail(id)
      .then((res) => res.json())
      .then((res) => setMovie(res?.results?.US?.link));
  }, [id]);

  return movie ? (
    <code>{JSON.stringify(movie)}</code>
  ) : (
    <p>Probably fetching data</p>
  );
}

export default function App() {
  const [trending, setTrending] = useState([]);

  //set movieID to get the movie ID's

  //set link to get the providerlink that belongs to each movieID.

  useEffect(() => {
    const trendUrl =
      "https://api.themoviedb.org/3/trending/movie/week?api_key=fde5ddeba3b7dec3fc1f51852ca0fb95";
    fetch(trendUrl)
      .then((response) => response.json())
      .then((data) => {
        setTrending(data.results);
      })
      .catch((error) => {
        console.log("Error!! Data interupted!:", error);
      });
  }, []);

  const moviesIdCollections = trending.map((item) => item.id);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      {moviesIdCollections.map((elm) => (
        <>
          {" "}
          <MovieDetail id={elm} />
          <p key={elm}>{elm}</p>
        </>
      ))}
    </div>
  );
}

Anda perlu mendorong moviedetail di moviesidcollections.map sehingga dapat menampilkan semua tautan film

1
Cadmus 5 April 2021, 06:01

Saya pikir kompiler mengeluh tentang jenis data. Anda dapat memeriksa dengan menambahkan? menandai.

function MovieDetail(props) {
  //...
  useEffect(() => {
    getMovieDetail(id)
      .then((res) => res.json())
      .then((res) => setMovie(res?.results?.US?.link));
  }, [id]);
 //...
}
0
Tae Yeong Han 5 April 2021, 01:54