React 组件未渲染来自 API 调用的数据

Question

我正在开发一个 React 项目，但在显示从电影组件中的 API 获取的数据时遇到问题。数据已正确记录在控制台中，但未显示在页面上。我需要一些帮助来找出原因。

这是我的 API 调用的代码：

import axios from 'axios';

const BASE_URL = 'http://127.0.0.1:5000';

export const getMovie = async (mood) => {
    try {
        console.log('Fetching movies for mood:', mood);
        const response = await axios.get(`${BASE_URL}/recomendar`, {
            params: { mood },
            headers: {
                Authorization: `Bearer ${localStorage.getItem('token')}`
            }
        });
        console.log(response.data);
        return response.data;
    } catch (error) {
        console.error('Error fetching movies:', error);
        throw error;
    }
};

这是我尝试在 HTML 中显示数据的电影组件：

import React, { useEffect, useState } from "react";
import { getMovie } from "../services/api";

const Movies = ({ mood }) => {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    const fetchMovies = async () => {
      if (mood) {
        try {
          const moviesData = await getMovie(mood);
          console.log(moviesData);  // This logs the data correctly
          setMovies(moviesData);
        } catch (error) {
          console.error("Error fetching movies:", error);
        }
      }
    };

    fetchMovies();
  }, [mood]);

  return (
    <div style={{ padding: "128px" }}>
      <h3>Movies</h3>
      <ul>
        {movies.map((movie) => (
          <li key={movie.id}>
            <div>{movie.title}</div>
            <div>{movie.genre}</div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Movies;

数据如何到来：

在Html中，ul标签为空

我通过主组件中的 Onclick 从用户选择中获取

mood

import { Link } from "react-router-dom";

import Section from "./Section";
import Button from "./Button";
import curve from "../assets/curve.png";
import { moods } from "../constants/mood";
import { getMovie } from "../services/api";
import { useState } from "react";

export const Main = () => {


  const [movies, setMovies] = useState([]);

  const handleMoodSelect = async (mood) => {
    try {
      const moviesData = await getMovie(mood);
      setMovies(moviesData);
    } catch (error) {
      console.error('Error fetching movies:', error);
    }
  };

  return (
    <Section className="pt-[12rem] -mt-[5.25rem] mb-8" customPaddings id="main">
      <div className="container relative">
        <div className="relative z-1 max-w-[62rem] mx-auto text-center mb-[3.875rem] md:mb-20 lg:mb-[6.25rem]">
          <h1 className="h1 mb-6">
            Descubra filmes incríveis com base no seu{" "}
            <span className="inline-block relative h1">
              humor
              <img
                src={curve}
                className="absolute top-full left-0 w-full xl:-mt-2"
                width={624}
                height={28}
                alt="Curva"
              />
            </span>
          </h1>
          <span className="inline-block relative h1">
            <img
              src={curve}
              className="absolute top-full left-0 w-full xl:-mt-2"
              width={624}
              height={28}
              alt="Curva"
            />
          </span>
          <p className="body-1 max-w-3xl mx-auto mb-6 text-n-2 lg:mb-8">
            A pergunta é: Como você está se sentindo hoje?
          </p>
          <Button white>Começar agora</Button>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4">
          {moods.map((mood) => (
            <button onClick={() => handleMoodSelect(mood.title)}>
            <Link to={`/movies/${mood.title}`}>
              <div className="mb-2 p-4 rounded-lg relative">
                <div
                  className="absolute inset-0 cursor-pointer"
                  style={{
                    borderRadius: "5px",
                    padding: "2px",
                    background:
                      "linear-gradient(225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876)",
                    WebkitMask:
                      "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
                    WebkitMaskComposite: "xor",
                    maskComposite: "exclude",
                    position: "absolute",
                    content: '""',
                    inset: 0,
                  }}
                />
                {mood.title} {mood.emoji}
              </div>
            </Link>
          </button>
          ))}
        </div>
      </div>
    </Section>
  );
};

Answer 1

问题不在代码中，一切都很好

你需要调查是什么阻碍了。尝试修复与此页面链接的所有警告