React中restaurantPhotoList数组值正确却无法重渲染的解决方法

问题现象 #

控制台已输出正确的restaurantsPhotoList数组（长度为29），但加载状态结束后，页面既不渲染照片列表，也不显示"There is no photo posted by users"的提示内容。

核心原因 #

最直接的问题是列表渲染的map函数没有返回有效JSX元素：
在restaurantsPhotoList.map的回调函数中，当前代码直接编写了<div>...</div>，但既没有用return显式返回，也没有用括号包裹实现箭头函数的隐式返回，导致map最终返回了一个全是undefined的数组，自然无法渲染出任何内容。

另外，状态更新时存在潜在闭包问题：更新restaurantsPhotoList时直接使用了当前作用域的restaurantsPhotoList值，在某些场景下可能导致状态更新不准确，但当前控制台已经显示状态更新成功，属于次要问题。

修复方案 #

1. 修复map函数的返回值 #

有两种方式确保map返回有效JSX，同时要把key属性放在最外层容器元素上（符合React列表渲染规范）：

// 方式一：显式添加return语句
restaurantsPhotoList.map((elmt: any, idx: any) => {
    return (
        <div key={idx}>
            <p>{elmt.src}</p>
        </div>
    );
})

// 方式二：隐式返回（去掉回调花括号，用括号包裹JSX）
restaurantsPhotoList.map((elmt: any, idx: any) => (
    <div key={idx}>
        <p>{elmt.src}</p>
    </div>
))

2. 优化状态更新逻辑（推荐） #

使用React函数式更新避免闭包问题，确保拿到最新状态值：

// 原代码
setRestaurantsPhotoList(arrayUnique(data.restaurant.photos.concat([...restaurantsPhotoList])));

// 优化后
setRestaurantsPhotoList(prevList => arrayUnique(data.restaurant.photos.concat([...prevList])));

3. 验证arrayUnique函数（可选） #

确认arrayUnique函数返回新数组引用，而非修改原数组后返回原引用。React需要状态引用变化才会触发重渲染，若该函数返回原数组引用，可能导致状态更新不生效（当前控制台已显示正确数组，此问题可能性较低，但可排查）。

修复后效果 #

完成上述修改后，加载状态结束后：

• 若restaurantsPhotoList有数据，会渲染出每个元素的src内容
• 若无数据，则显示无照片的提示文本

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