如何从获取响应中解构和重命名特定属性并保存到状态对象？

Question

我正在从 OMDB API 获取数据并将这些数据保存到状态。但是，我遇到了两个问题：

1. 如何解构收到的数据，同时重命名数据，然后将其保存到状态？
2. 如何只将特定属性保存到状态对象？

详情：

当我从 OMBD API 获取时，我收到一个大型响应对象，其中包含的属性多于我将使用的属性。我只想保存我所在州内的特定属性，并重命名这些属性。

回复：

useEffect(() => {
    const getMovie = async () => {
        const res = await fetch(
          `http://www.omdbapi.com/?apikey=${API_KEY}&i=${selectedId}`
        );
        const data = await res.json();

        // Destructuring and setting state here
    };

    getMovie();
  }, []);

此响应包含的数据比我最终需要用于状态对象的数据多。当我想将属性重命名为小写以便遵循更标准化的命名约定时，这些属性也全部大写。 （见下面的类型）

export interface MovieDetailType {
  title: string;
  year: string;
  poster: string;
  runtime: string;
  plot: string;
  imdbRating: string;
  released: string;
  actors: string[];
  director: string;
  genre: string;
}

如何解构并重命名响应（为小写），以便仅存储上述类型中列出的特定属性？

  const [movie, setmovie] = useState<MovieDetailType>();
  ...
  <header>{movie.title}</header>
  <p>{movie.plot}</p>
  /// etc

Answer 1

一个简单的解决方案是创建一个新对象，其中包含服务器端模型感兴趣的属性名称及其各自的值。例如：

const objMovie = { title: data.Title, year: data.Year };
setmovie(objMovie);

Answer 2

• 您可以调用setmovie并使用您的界面分配相关值
• （在您的图像中）演员作为一个字符串返回，因此您需要拆分为一个数组

useEffect(() => {
    const getMovie = async () => {
        const res = await fetch(
            `http://www.omdbapi.com/?apikey=${API_KEY}&i=${selectedId}`
        );
        const data = await res.json();

        // Destructuring and setting state here
        setmovie({
            title: data.Title,
            year: data.Year,
            poster: data.Poster,
            runtime: data.Runtime,
            plot: data.Plot,
            imdbRating: data.ImdbRating,
            released: data.Released,
            actors: data.Actors.split(", "), //Appears to be one string in the response
            director: data.Director,
            genre: data.Genre,
        }) 
    };

    getMovie();
}, []);

Answer 3

您只需创建一个具有所需属性的新对象，然后将其存储在状态中？

  useEffect(() => {
    const getMovie = async () => {
      const res = await fetch(
        `http://www.omdbapi.com/?apikey=${API_KEY}&i=${selectedId}`
      );
      const data = await res.json();

      const {
        Title: title,
        Year: year,
        Poster: poster,
        Runtime: runtime,
        Plot: plot,
        imdbRating,
        Released: released,
        Actors: actors,
        Director: director,
        Genre: genre,
      } = data;

      // create a new object 
      const movieData: MovieDetailType = {
        title,
        year,
        poster,
        runtime,
        plot,
        imdbRating,
        released,
        actors: actors.split(', '), // convert actors to an array
        director,
        genre,
      };

      // set the state with the new object
      setMovie(movieData);
    };

    getMovie();
  }, [selectedId]); // include `selectedId` as dependency

注意：您希望每次更新

selectedId

时运行此效果，以获取其数据并将其存储在状态中