React调用extraccion.map报错not a function，PHP返回MySQL数据渲染异常

核心原因 #

extraccion.map is not a function报错的根本原因是调用map方法时，extraccion的类型不是数组，分后端、前端两类触发场景：

• 后端侧：PHP返回的内容不是合法的数组格式JSON，常见诱因包括无查询结果时数组未初始化、响应头未指定JSON类型、PHP输出了报错信息/多余空格等污染了JSON结构
• 前端侧：extraccion的初始值未设为空数组，首次渲染时接口还未返回就调用map、axios未自动解析返回内容导致拿到的是JSON字符串而非JS数组

修复步骤 #

1. 后端PHP代码修正 #

// 优先设置JSON响应头，通知前端返回内容为JSON格式
header('Content-Type: application/json');
// 提前初始化数组，避免无查询结果时变量未定义
$array = [];
while($fila = mysqli_fetch_array($ejecutar)) {
    $array[] = array(
        "titulo" => $fila['titulo'],
        "tipo" => $fila['tipo'],
        "tamanio" => $fila['tamanio'],
        "fecha" => $fila['fecha'] 
    ); 
}
// 直接输出JSON，后续不要加任何多余内容（包括PHP闭合标签后的空格、调试打印内容等）
echo json_encode($array);

2. 前端逻辑修正 #

状态初始化修正

将extraccion的默认值设为空数组，避免首次渲染报错：

const [extraccion, setExtraccion] = useState([]);

接口请求逻辑增加容错

对返回值做类型校验，异常情况兜底为空数组：

const obtenerArchivos = async () => {
    console.log('Clase obtenerArchivos ejecutada')
    try {
        const res = await axios.get('http://localhost/AdaptStorage/mostrarDatos.php');
        let data = res.data;
        // 如果返回的是字符串格式JSON，手动解析
        if (typeof data === 'string') {
            data = JSON.parse(data);
        }
        // 校验是否为数组，非数组则兜底为空
        const finalData = Array.isArray(data) ? data : [];
        setExtraccion(finalData);
        console.log(res.data);
    } catch (e) {
        // 接口请求失败时重置为空数组
        setExtraccion([]);
        console.error('数据获取失败', e);
    }
}

渲染逻辑优化

增加可选链容错，同时补充map遍历必须的key属性，避免React警告：

{  
    extraccion?.map((item, index)=>{
        return(
        <tr style={{ borderBottom: "solid 0.05rem #bbb" }} key={index || item.titulo}>
        <th scope="row" style={{ fontWeight: 600 }}>
        </th>
        <td style={{ fontWeight: 400 }}>{item.titulo}</td>
        <td style={{ fontWeight: 400 }}>{item.fecha || '28/09/21'}</td>
        <td style={{ fontWeight: 400 }}>{item.tamanio || '230 KB'}</td>
        <td
          style={{
            fontWeight: 400,
            whiteSpace: "nowrap",
            overflow: "hidden",
            textOverflow: "ellipsis",
          }}
        >
          
        </td>
      </tr>
      );
    })
}

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