React中map渲染组件时Tailwind mx-auto仅首个生效的解决求助

问题原因 #

1. 异步函数引发无限重渲染：MovieCard里的getMoviePoster直接写在组件函数体内，每次组件渲染都会执行这个异步请求，更新moviePoster后又触发新一轮渲染，频繁的重渲染会干扰样式正常生效，还会浪费API资源。
2. flex布局样式冲突：父容器MoviesList在md及以上屏幕是flex-row布局，同时设置了space-x-6（给子元素加右侧margin），而子元素MovieCard的mx-auto（自动左右margin）会和这个规则冲突；另外flex-row布局没加flex-wrap，卡片总宽度超过父容器时会被挤压，进一步导致居中效果异常。

解决方案 #

1. 修复异步请求的无限重渲染问题 #

用useEffect包裹请求逻辑，只在movieTitle变化时触发：

import { useState, useEffect } from 'react';

const MovieCard = ({movieTitle}) => {
    const [moviePoster,setMoviePoster] = useState('');

    const getMoviePoster = async () => {            
        const response = await fetch(`http://www.omdbapi.com/?apikey=c4bceb23&t=${movieTitle}`);
        const data = await response.json();
        setMoviePoster(data.Poster);
    }

    // 仅当movieTitle变化时执行请求
    useEffect(() => {
        getMoviePoster();
    }, [movieTitle]);

    return(
        <div className="rounded-xl shadow-xl w-64 my-6 overflow-hidden">
            <div className='Movieposter w-full'>
                <img src={moviePoster} alt={movieTitle} />
            </div>
            <div className='Moviedetail w-full bg-blue-200 p-3'>{movieTitle}</div>
        </div>
    );
}

export default MovieCard;

2. 调整flex布局，统一控制对齐逻辑 #

修改MoviesList的布局类，通过父容器的justify-content和align-items实现卡片居中，移除子元素的mx-auto避免冲突：

const MoviesList = () => {
    return(
        <div className='MoviesList space-x-0 space-y-10 bg-red-400 my-10 flex flex-col items-center mx-auto w-11/12 md:flex-row md:space-x-6 md:space-y-0 md:justify-center md:flex-wrap'>
            {title.map((data,index) => <MovieCard key={index} movieTitle={data.name}/>)}
        </div>
    );
}

export default MoviesList;

• md:flex-wrap：避免宽屏时卡片因总宽度超限被挤压；
• items-center：移动端flex-col布局下，让卡片水平居中；
• md:justify-center：宽屏flex-row布局下，让卡片整体水平居中；
• 移除MovieCard的mx-auto：由父容器统一控制对齐，避免和space-x-6的margin规则冲突。

额外优化建议 #

• 不要用index作为组件key：当电影列表顺序变化时，会导致组件错误复用，建议用OMDB返回的imdbID这类唯一标识当key；
• 处理海报加载失败：给img加onError事件，显示默认占位图；
• 添加loading状态：请求海报过程中显示加载提示，提升用户体验。

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