reactjs - 无法从 React 中获取的资源中读取数据。（无法读取未定义的属性“backdrop_path”）

Question

我已经从端点获取了一些数据并将其存储在状态中。当我尝试在控制台中查看结果时，它工作正常。但是当我尝试在组件中使用它时，它会抛出一个错误，告知密钥未定义。这是我的代码，并且heroImage未定义，请帮助

const Home = () => {
  const [state, setState] = useState({ movies: [] });
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);
  const fetchMovies = async endpoint => {
    setIsError(false);
    setIsLoading(false);

    const params = new URLSearchParams(endpoint);
    if (!params.get("page")) {
      setState(prev => ({
        ...prev,
        movies: [],
        searchItem: params.get("query")
      }));
    }

    try {
      const result = await fetch(endpoint)).json();

      setState(prev => ({
        ...prev,
        movies: [...prev.movies, result.results],
        heroImage: prev.heroImage || result.results[0],
        currentPage: result.page,
        totalPage: result.total_pages
      }));
    } catch (error) {
      setIsError(true);
    }
    setIsLoading(false);
  };

  useEffect(() => {
    fetchMovies(`${API_URL}movie/popular?api_key=${API_KEY}&page=1`);
  }, []);

  return (
    <>
      <div className="rmdb-home">
        <div>
          <HeroImage
            image={`${IMAGE_BASE_URL}${BACKDROP_SIZE}${state.heroImage.backdrop_path}`}
          />
          <SearchBar />
        </div>
      </div>
    </>
  );
};

标签： reactjsreact-hooksuse-effect

Answer 1

因为您的组件在首次渲染时尝试访问heroImage，但未定义

heroImage 所以你需要一个初始状态

const [state,setState]=useState({movies:[], heroImage: {}})