Reactjs警告：串列中的每個孩子都應該有一個唯一的“關鍵”道具-有解無憂

我正在學習反應，我正在嘗試做一個簡單的程式，但我有這個錯誤，我找不到錯誤在哪里，我已經檢查過，每部電影的 imdID 都不同。

查看我正在使用的 json 檔案，請參閱https://www.omdbapi.com/

    import { useState, useEffect } from "react";
import MovieList from "./components/MovieList";

const APIKEY = "&apikey=eead1bf8";
const URL = "https://www.omdbapi.com/";

async function fetchMovies(search = "The godfather") {
  const response = await fetch(URL   "?s="   search   APIKEY).then((resp) =>
    resp.json()
  );
  //.then((ris) => ris);

  const { Search: movies, totalResults: totalcount } = response;

  return { movies, totalcount };
}

function App() {
  const [movies, setMovies] = useState([]);
  const [totalCount, setTotalCount] = useState(0);

  useEffect(() => {
    // fetchMovies(); se facessi così fetchMovies è asincrona
    // quindi il codice dentro use effect non si blocca

    const callApi = async () => {
      const data = await fetchMovies();

      setMovies(data.movies);
      setTotalCount(data.totalcount);
    };

    callApi();

    return () => {};
  }, []);

  return (
    <div className="App container-fluid">
      <h1>My favourite movies </h1>
      <MovieList movies={movies} />
      <button type="button" className="btn btn-primary">
        Primary
      </button>
    </div>
  );
}

export default App;



function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie) => {
        return <li key={movie.imdID}> {movie.Title}</li>;
      })}
    </ul>
  );
}

export default MovieList;

在瀏覽器上代碼作業，感謝您的幫助

uj5u.com熱心網友回復：

function MovieList({ movies }) {
  return (
    <ul>
      {movies.map((movie) => {
        return <li key={movie.imdID}> {movie.Title}</li>;
      })}
    </ul>
  );
}

你在那里打錯字了。它的movie.imdbID 而不是movie.imdID。所以 react 給你警告，因為所有這些 id 都被作為 undefined 傳遞，這不是唯一的。

這是您的 API 生成的電影物件的樣子

{
  "Title": "",
  "Year": "",
  "imdbID": "",
  "Type": "movie",
  "Poster": ""
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444603.html

標籤：反应编译器错误

上一篇：如何僅在選擇時從選擇值中獲取onChange？不使用useEfect有可能嗎？[復制]

下一篇：如何將文本添加到特定的映射元素？