React组件中如何将JSX元素值设为Fetch请求返回数据

你的组件没有返回任何JSX元素——fetch是异步操作，回调函数里的return语句并不会成为组件的返回值，组件本身执行完fetch后就结束了，自然不会在页面输出任何内容。

React里处理异步数据得结合**状态（useState）和副作用钩子（useEffect）**来做，具体步骤和修正后的代码如下：

1. 先导入需要的React钩子
2. 用状态存储接口返回的数据、加载状态和错误信息
3. 在useEffect里执行fetch请求，拿到数据后更新状态
4. 根据不同状态渲染对应的内容（加载中、数据展示、错误提示）

修正后的完整代码：

import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom'; // 确保已导入useParams

const BoardPage = () => {
    const { id } = useParams();
    const [board, setBoard] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchBoard = async () => {
            try {
                const response = await fetch('http://localhost:8000/getBoardByID', {
                    headers: {
                        'Content-type': 'application/json'
                    },
                    method: 'POST',
                    body: JSON.stringify({ id })
                });
                
                if (!response.ok) {
                    throw new Error('请求失败');
                }
                
                const data = await response.json();
                setBoard(data);
            } catch (err) {
                setError(err.message);
            } finally {
                setLoading(false);
            }
        };

        fetchBoard();
    }, [id]); // 当id变化时自动重新请求数据

    // 根据状态渲染对应内容
    if (loading) {
        return <div>加载中...</div>;
    }

    if (error) {
        return <div>出错了：{error}</div>;
    }

    if (!board) {
        return <div>未找到看板</div>;
    }

    return (
        <div>
            <h1>board #{board.id}</h1>
            {/* 可以按需添加更多字段展示 */}
            <p>宽度：{board.width}</p>
            <p>高度：{board.height}</p>
        </div>
    );
};

export default BoardPage;

• useState：用来存异步数据、加载状态和错误信息，状态更新时会触发组件重新渲染，把新数据展示到页面
• useEffect：专门用来处理异步请求这类副作用操作，依赖数组里的id变化时，会自动重新发请求，避免无效重复请求
• async/await：比.then链式调用更易读的异步写法，同时加了错误处理，防止请求失败后页面卡死

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