MERN栈useState更新数据后前端无展示问题排查

核心问题1：useState解构方式错误 #

在UserPlaces.js中，错误使用对象解构获取useState返回值：

const {loadedPlaces, setLoadedPlaces} = useState();

useState返回的是数组，必须用数组解构，同时建议初始化空数组避免后续判断异常：

const [loadedPlaces, setLoadedPlaces] = useState([]);

错误解构会导致loadedPlaces和setLoadedPlaces均为undefined，无法正常更新状态和渲染数据。

核心问题2：后端返回字段与前端取值不匹配 #

你明确说明console.log(responseData.places)数据正确，但代码中却取值responseData.bus_stops：

console.log(responseData.bus_stops)
setLoadedPlaces(responseData.bus_stops);

需修改为匹配后端返回的字段：

console.log(responseData.places)
setLoadedPlaces(responseData.places);

问题3：PlaceItem的className语法错误 #

在PlaceItem.js中，<li>标签的className存在语法错误，多余引号和等于号会导致元素样式失效或无法正常渲染：

<li className='&quot;place=item'> 

修正为正确类名：

<li className='place-item'> 

潜在优化补充 #

在UserPlaces.js的返回逻辑中，可补充加载完成但无数据的提示，避免页面空白：

{!isLoading && loadedPlaces.length === 0 && (
  <div className="center">
    <p>暂无相关数据</p>
  </div>
)}

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