React前端DisplayItems页面无内容显示问题求助

API 探路者

2026-6-13

问题定位与修复方案

核心问题

前端代码处理API响应时，错误地尝试从response.data.item中提取物品列表，但实际接口直接返回物品数组，导致response.data.item为undefined，最终items被设置为空数组，页面显示"No items found"。

修复步骤

修正API响应处理逻辑
将useEffect中处理axios响应的代码：
```
setItems(Array.isArray(response.data.item) ? response.data.item : []);
```
修改为：
```
setItems(Array.isArray(response.data) ? response.data : []);
```
因为接口返回的直接是物品数组，无需再访问item属性。
可选：统一ID类型匹配
后端接口返回的id是字符串类型（如"1"），而前端selectedItemId初始值为null，虽然当前比较逻辑selectedItemId === item.id能正常工作，但如果后续后端将id改为数字类型，可能会出现匹配问题。可以将selectedItemId初始值改为空字符串：
```
const [selectedItemId, setSelectedItemId] = useState("");
```

修改后的完整`useEffect`代码

useEffect(() => {
  axios
    .get("http://localhost:8000/itemTest")
    .then((response) => {
      console.log("API Response:", response.data);
      setItems(Array.isArray(response.data) ? response.data : []); // 直接使用response.data
      setLoading(false);
    })
    .catch((err) => {
      console.error("Error details:", err);
      setError(err.response?.data?.message || "Error fetching items");
      setLoading(false);
    });
}, []);