React+PHP后端数据展示报错：items.map is not a function

问题场景 #

使用React JS作为前端、原生PHP作为后端，将表单数据存储至MySQL后，在另一页面UI展示数据时出现报错：
ItemList.js:15 Uncaught TypeError: items.map is not a function

React代码 #

import React, { useState, useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import axios from "axios";

function ItemList() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    axios.get("http://localhost/reactphp/items/").then(function (response) {
      setItems(response.data);
      // console.log(items);
    });
  }, []);
  return (
    <Container>
      <Row>
     
        {items.map((item, key) => (
          <Col lg="4" sm="6" key={key}>
            <img src={item.image} alt="pic" />
            <h3>{item.name}</h3>
            <span>{item.price}</span>
          </Col>
        ))}
      </Row>
    </Container>
  );
}

export default ItemList;

PHP代码 #

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Origin: *");
include 'conn.php';
$getData = "SELECT * FROM items";
$result = $conn->query($getData);
$data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
echo json_encode($data);
print_r($data);
?>

报错原因 #

PHP代码中同时输出了json_encode($data)和print_r($data)，导致后端返回的响应内容是JSON字符串+print_r格式化文本的混合内容，不是纯JSON格式。axios接收到该内容后无法正确解析为数组，最终items变成非数组类型，调用map方法时触发类型错误。

此外，PHP中重复设置了Access-Control-Allow-Origin头，虽不直接导致报错，但属于冗余代码。

解决方案 #

1. 修复PHP代码，仅输出纯JSON #

移除print_r($data);语句，确保后端只返回标准JSON格式数据；同时删除重复的CORS头：

<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
include 'conn.php';
$getData = "SELECT * FROM items";
$result = $conn->query($getData);
$data = array();
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}
echo json_encode($data);
?>

2. （可选）React端增加数组校验 #

为避免初始加载或异常情况下的报错，在调用map前先校验items是否为数组：

// 修改return中的渲染逻辑
return (
  <Container>
    <Row>
      {Array.isArray(items) && items.map((item, key) => (
        <Col lg="4" sm="6" key={key}>
          <img src={item.image} alt="pic" />
          <h3>{item.name}</h3>
          <span>{item.price}</span>
        </Col>
      ))}
    </Row>
  </Container>
);

内容的提问来源于stack exchange，提问作者Muhammad Hasnain Khan