React组件未生效：传递Props后页面无渲染效果排查

问题根源 #

你的MovieList组件没有返回JSX内容。箭头函数定义的组件中，若要返回多行JSX，必须显式使用return语句，或者将JSX用圆括号包裹实现隐式返回。原代码中的JSX片段（<>{...}</>）没有被返回，导致组件渲染为空。

修正后的MovieList代码 #

import React from "react"

const MovieList = (props) => {
    // 显式返回JSX内容
    return (
        <>
            {props.movies.map((movie, index) => (
                // 列表项添加唯一key属性，用imdbID比index更可靠
                <div key={movie.imdbID}>
                    {/* 处理Poster为N/A的情况，避免图片加载错误 */}
                    <img 
                        src={movie.Poster !== "N/A" ? movie.Poster : ""} 
                        alt={`${movie.Title} poster`} 
                    />
                </div>
            ))}
        </>
    )
}

export default MovieList;

额外优化说明 #

• 列表循环渲染必须添加唯一key属性，使用movie.imdbID能避免列表顺序变化时的不必要重渲染
• 针对Poster为"N/A"的条目做特殊处理，防止页面出现无效图片占位符

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