Question

我正在使用 TMDB API，它允许我在列表中显示电影。

我有我的 Add.js 组件，它允许我进行查询和搜索电影并将它们添加到我的列表中

但我收到此错误：

<块引用>

类型错误：无法读取未定义的属性“长度”

Add.js

import React, { useState } from "react";
import { ResultCard } from "./ResultCard";

export const Add = () => {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const onChange = (e) => {
    e.preventDefault();

    setQuery(e.target.value);

    fetch(
      `https://api.themoviedb.org/3/search/movie?api_key=${process.env.REACT_APP_TMDB_KEY}&language=en-US&page=1&include_adult=false&query=${e.target.value}`
    )
      .then((res) => res.json())
      .then((data) => {
        if (!data.errors) {
          setResults(data.results);
        } else {
          setResults([]);
        }
      });
  };

  return (
    <div className="add-page">
      <div className="container">
        <div className="add-content">
          <div className="input-wrapper">
            <input
              type="text"
              placeholder="Search for a movie"
              value={query}
              onChange={onChange}
            />
          </div>

          {results.length > 0 && (
            <ul className="results">
              {results.map((movie) => (
                <li key={movie.id}>
                  <ResultCard movie={movie} />
                </li>
              ))}
            </ul>
          )}
        </div>
      </div>
    </div>
  );
};

Answer 1

问题发生在这行代码：

.then((data) => {
    if (!data.errors) { // This is always giving error false since errors property is not returned from API
      setResults(data.results);
    } else {
      setResults([]);
    }
 });

返回的响应数据为：

<块引用>

{status_code: 7, status_message: "无效的 API 密钥：您必须被授予一个有效的密钥。”，成功：假} status_code：7 status_message：“无效 API 密钥：您必须获得有效的密钥。”成功：false

这是因为 API 返回的 data 没有 errors 属性。

您需要使用 data.success 属性而不是 data.errors。

CODESANDBOX 工作代码：

https://codesandbox.io/s/issue-1ng77?file=/src/App.js

Answer 2

出于某种原因，results 未定义。

尝试在获取数据后控制台记录结果，也许您将数据设置为未定义或其他内容。

要快速解决此问题，您可以执行以下操作

{results?.length > 0 && ( ... )}

类型错误：无法读取未定义的属性“长度”，API TMDB

2 个答案: