如何通过Axios将PHP数组传递至React并实现列表渲染？

1. 服务器端PHP代码修改 #

print_r()输出的是纯文本格式的数组结构，前端无法直接解析为JS数组，必须改成输出JSON格式：

<?php
// 示例二维数组，替换成你实际的图片路径数组
$imagePaths = [
    ['img_url' => '/uploads/pic1.jpg'],
    ['img_url' => '/uploads/pic2.jpg'],
    ['img_url' => '/uploads/pic3.jpg']
];

// 设置响应头为JSON类型，确保前端能正确识别
header('Content-Type: application/json');
// 允许跨域（开发环境临时用，生产环境建议指定具体域名）
header('Access-Control-Allow-Origin: *');
// 输出JSON编码后的数组
echo json_encode($imagePaths);
?>

2. React端请求与渲染实现 #

Axios会自动将JSON响应解析为JS数组，直接用map遍历渲染即可：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function ImageList() {
    const [images, setImages] = useState([]);

    useEffect(() => {
        // 替换成你的PHP接口实际地址
        axios.get('http://localhost/your-php-file.php')
            .then(res => {
                // 响应数据已经是JS数组，直接存入状态
                setImages(res.data);
            })
            .catch(err => {
                console.log('请求出错:', err);
            });
    }, []);

    return (
        <ul>
            {images.map((item, idx) => (
                <li key={idx}>
                    <img src={item.img_url} alt={`图片${idx+1}`} />
                </li>
            ))}
        </ul>
    );
}

export default ImageList;

关键注意事项 #

• 开发环境如果存在跨域问题，除了PHP端加跨域头，也可以在React项目的package.json里配置"proxy": "http://你的PHP服务器地址"。
• 用map渲染列表时，必须给每个<li>设置唯一key属性，优先使用数组中自带的唯一标识（比如图片ID），避免用索引作为唯一键（仅临时场景可用）。

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