img src在reactjs中沒有響應

Question

這是我的 row.js 代碼：

    import React, { useEffect, useState } from 'react';
import axios from './axios';
const base_URL="https://image.tmdb.org/t/p/original";
function Row({title,fetchUrl}) {
    const [movies,setMovies]=useState([]);
    useEffect(()=>{
        async function fetchData(){
            const request=await axios.get(fetchUrl);
            console.log(request);
            setMovies(request.data.results);
            return request;
        }
        fetchData();
    },[fetchUrl]);
  return (
    <div className="row">
    <h2>{title}</h2>
    <div className="row__posters">
    {movies.map(movie=>{
        console.log(movie);
        <img src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>
    })}
    </div>
    </div>
  )
}
export default Row

我的屏幕應該顯示電影的海報但它不顯示它，我想知道movies.map......部分和img src =“......”部分有問題

Answer 1

您需要返回圖像：

<div className="row__posters">
{movies.map(movie=>{
    console.log(movie);
    return <img src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>
})}
</div>

Answer 2

你只映射電影對象而不是返回。因此試試這個：

{movies.map((movie,index)=>{
    console.log(movie);
   return ( <img key={index} src={'${base_URL}${movie.poster_path}'} alt={movie.name}/>)
})}

在這里，在 img 標簽中也使用 key = {index}。它迭代地為每個 img 標簽提供唯一的鍵。