对象可能“未定义”ts{18048}

Question

我创建了这个程序，我需要从 api 映射数据。 有一个错误，只是说“结果”可能是未定义的。

    import { useEffect, useState } from "react";
    import { Movie } from "./Movies";

    export default function MoviesList() {
      const [result, setResult] = useState<Movie[]>();
      useEffect(() => {
        LoadMovies();
      }, []);
      async function LoadMovies() {
        const response = await fetch("https://localhost:****/api/movies");
        const movies = await response.json();
        movies.releaseDate = ConvertDate(new Date(movies.releaseDate));
        setResult(movies);
      }
      function ProcessMovie(movie: Movie, id: number) {
        return (
          <tr>
            <td>{movie.title}</td>
            <td>{movie.genre}</td>
            <td>{movie.director}</td>
            <td>{movie.price}</td>
            <td>{movie.revenue}</td>
            <td>{movie.releaseDate}</td>
          </tr>
        );
      }
      function ConvertDate(d: Date) {
        return (
          d.getFullYear +
          ("0" + d.getMonth + 1).slice(-2) +
          ("0" + d.getDate).slice(-2)
        );
      }
      return <table><tbody>{result.map(ProcessMovie)}</tbody></table>
    }

我也制作了班级电影。

    export class Movie {
      title: string | undefined;
      director: string | undefined;
      genre: string | undefined;
      price: number | undefined;
      revenue: number | undefined;
      releaseDate: string | undefined;
    }

我尝试了一些方法，包括取消电影类属性的未定义，但弹出了新的错误。

我该怎么办？ 预先感谢您。

Answer 1

第1期

您没有在评论中提到的

useState

中提供默认/初始值。所以目前你的

result

是

Movie[] | undefined

类型。

解决方案：提供空数组，使

result

成为

Movie[]

类型。

const [result, setResult] = useState<Movie[]>([]);

第2期

假设返回的响应是一个数组，则不能直接使用

movies.releaseDate

修改属性值。相反，您需要迭代每个元素并更新其

releaseDate

字段。另外，您应该使用

movies

而不是

let

声明

const

变量，因为

const

关键字不允许 重新分配 变量。

解决方案：

const response = await fetch('https://localhost:****/api/movies');
let movies = await response.json();

movies = movies.map((x) => ({
  ...x,
  releaseDate: ConvertDate(new Date(x.releaseDate)),
}));

第3期

您没有调用日期函数。这将导致生成的日期不正确。

解决方案：

function ConvertDate(d: Date) {
  return (
    d.getFullYear() +
    ('0' + d.getMonth() + 1).slice(-2) +
    ('0' + d.getDate()).slice(-2)
  );
}

演示@StackBlitz