useState 变量没有通过 props 传递

Question

我试图通过 props 将一个字符串传递给另一个组件，但它作为一个空对象通过。我的其他变量从另一端出来就好了。有没有不同的方式来传递不是对象的道具？我不知道我在这里做错了什么。

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

const MovieList = () => {
  const [movies, setMovies] = useState([]);
  const [imageUrl, setImageUrl] = useState("");

  const API_KEY = "XXXXXXXXXXXXXXXXXXXXXX";

  const getMovies = async () => {
    const response = await axios.get(
      `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&language=en-US&with_genres=27`
    );

   
    setMovies(response.data.results);
    
  };

  const getImages = async () => {
    const img = await axios.get(
      `https://api.themoviedb.org/3/configuration?api_key=${API_KEY}`
    );
    setImageUrl(img.data.images.base_url);
  };

  useEffect(() => {
    getMovies();
  }, [setMovies]);

  useEffect(() => {
    getImages();
  }, [setImageUrl]);

  return (
    <div>
      {movies.map((movie, idX) => (
        <Movie movie={movie} id={idX} imageUrl={imageUrl} />
      ))}
      <p>{imageUrl}</p>
    </div>
  );
};

export default MovieList;

import React from 'react'

const Movie = ({movie}, imageUrl, idX) => {
    return (
        <div>
                <h3 key={idX}>{movie.title}</h3>
                <img src={movie.poster_path} alt="" />
          
        </div>
    )
}

export default Movie

Answer 1

当 React 调用您的组件函数时，它会将 props 作为单个对象传递，然后您可以 destructure。变化

const Movie = ({movie}, imageUrl, idX) =>

至

const Movie = ({movie, imageUrl, idX}) =>

useState 变量没有通过 props 传递

useState variable not getting passed through props

reactjs

react-props