React+Redux开发Disney+克隆时Firestore获取的图片无法在卡片渲染如何解决

核心问题原因 #

• Array.map() 回调函数使用花括号包裹逻辑时，没有显式使用 return 返回 JSX 元素，导致遍历后返回的是全 undefined 的数组，React 不会渲染 undefined 值，所以控制台能打印出图片地址，但页面没有卡片渲染。
• 导入语句存在拼写冗余，selctMovies 是拼写错误的无效导入，可直接删除。
• 遍历渲染的 JSX 节点缺少必填的 key 属性，会触发 React 警告，也可能影响列表更新逻辑。

修复后代码 #

import React from 'react'
import styled from 'styled-components'
import { selectMovies } from '../features/movie/movieSlice'
import { useSelector } from 'react-redux'

function Movies() {
    const movies = useSelector(selectMovies);

    return (
        <Container>
            <h4>Recomended for You</h4>
            <Content>
                { movies && movies.map((movie) => {
                    console.log(movie.cardImg);
                    // 显式返回JSX，添加唯一key属性和img的alt属性
                    return (
                      <Wrap key={movie.id}>
                          <img src={movie.cardImg} alt={movie.title || '影视卡片'} />
                      </Wrap>
                    )
                })}
            </Content>
        </Container>
    )
}

也可以使用隐式返回的写法简化代码，不需要写 return：

{movies && movies.map(movie => (
  <Wrap key={movie.id}>
    <img src={movie.cardImg} alt={movie.title || '影视卡片'} />
  </Wrap>
))}

内容的提问来源于stack exchange，提问作者Gihan Punarji