React列表组件未渲染：使用jQuery GET加载文件夹列表异常

问题原因 #

• $.get是异步操作，组件首次渲染时数组m还是空的，等请求拿到数据后修改m，但m不是React的状态变量，React无法感知到这个变化，所以不会重新渲染列表。
• 直接在组件函数内部发起异步请求，会导致组件每次渲染都重复发送请求，不符合React的渲染逻辑。

修复方案（推荐使用React原生API） #

用React的useState管理文件夹数据，useEffect控制异步请求的执行时机，替代jQuery的AJAX请求：

import { useState, useEffect } from 'react';

function HorizontalNav() {
    return (
        <nav className="navbar navbar-expand-lg">
            <div className="container-fluid">
                <div className="navbar navbar-collapse">
                    <ul className="navbar-nav me-auto">
                        <li className="nav-item me-3">
                            <a className=""><i className="bi bi-gear-fill"></i></a>
                        </li>
                        <li className="nav-item dropdown">
                            <a className="dropdown-toggle"><i className="bi bi-paint-bucket"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    );
}

function FolderList() {
    // 用useState定义状态变量存储文件夹数据
    const [folders, setFolders] = useState([]);

    useEffect(() => {
        // 用fetch发起GET请求
        fetch('get_folders')
            .then(response => response.json())
            .then(data => {
                // 请求成功后更新状态，触发组件重新渲染
                setFolders(data.folders);
            })
            .catch(error => {
                console.error('加载文件夹失败:', error);
            });
    }, []); // 空数组依赖，确保只在组件挂载时执行一次请求

    return (
        <ul>
            {folders.map((folder, index) => (
                // 循环渲染时要加唯一key，这里用index（如果有id最好用id）
                <li key={index}>{folder.name}</li>
            ))}
        </ul>
    );
}

function App() {
    return (
        <div className="p-5">
            <HorizontalNav/>
            <div className="mt-3" id="folders">
                <FolderList/>
            </div>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);

如果一定要保留jQuery的AJAX请求 #

只需把fetch换成$.get，但同样要在回调里更新状态：

import { useState, useEffect } from 'react';

function FolderList() {
    const [folders, setFolders] = useState([]);

    useEffect(() => {
        $.get('get_folders', function(data) {
            setFolders(data.folders);
        }).fail(function(error) {
            console.error('加载文件夹失败:', error);
        });
    }, []);

    return (
        <ul>
            {folders.map((folder, index) => (
                <li key={index}>{folder.name}</li>
            ))}
        </ul>
    );
}

后端Flask注意事项 #

确保你的Flask路由返回正确的JSON格式，并且处理跨域（如果前后端不在同一域名下）：

from flask import Flask, jsonify
from flask_cors import CORS # 需要安装flask-cors：pip install flask-cors

app = Flask(__name__)
CORS(app) # 允许跨域请求

@app.route('/get_folders')
def get_folders():
    # 模拟文件夹数据，实际从数据库或文件系统获取
    folders = [{"name": "文件夹1"}, {"name": "文件夹2"}, {"name": "文件夹3"}]
    return jsonify({"folders": folders})

if __name__ == '__main__':
    app.run(debug=True)

内容的提问来源于stack exchange，提问作者C.N. Joseph