使用fetch调用Django API时React应用返回#152错误如何解决？

你代码的核心问题有三个：

1. React 组件必须在顶层返回合法的 JSX 才会执行渲染逻辑，你在 fetch 的异步回调中返回的 <Question /> 只是 Promise 回调的返回值，不会被当作 App 组件的渲染输出，所以 Question 组件根本没有被渲染，自然不会执行内部的 console.log。
2. 你直接把 fetch 写在组件的顶层作用域，只要 App 组件重渲染就会重复触发接口请求，后续很容易出现死循环问题。
3. 接口返回的异步数据没有存入组件状态，无法驱动组件重渲染更新视图。

修正后的代码如下：

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';

function App() {
    const [state, setState] = useState({
        question_number: 1,
        is_any_option_selected: false,
        selected_option: 0
    });
    // 新增状态存储接口返回的题目数据
    const [questionData, setQuestionData] = useState(null);

    console.log(`at state, the question number is ${state.question_number}`);

    // 用useEffect包裹异步请求，只在question_number变化时触发请求
    useEffect(() => {
        fetch(`/question/${state.question_number}`)
            .then(response => response.json())
            .then(question => {
                console.log(`inside fetch, the question text is ${question.text}`);
                // 把返回数据存入状态，触发组件重渲染
                setQuestionData(question);
            })
    }, [state.question_number]);

    // 组件顶层返回JSX，有数据时渲染Question组件，无数据时渲染加载提示
    return questionData ? (
        <Question question_text={questionData.text} />
    ) : (
        <div>加载中...</div>
    );
}


function Question(props) {
    console.log(`inside Question, the question text is: ${props.question_text}`);
    return (
        <div>
            <h1>text: {props.question_text}</h1>
        </div>
    );
}

const root = ReactDOM.createRoot(document.querySelector("#app"));
root.render(<App />);

修正说明：

• 新增了questionData状态用来存储接口返回的题目数据，请求成功后更新状态会触发App组件重渲染
• 用useEffect钩子包裹请求逻辑，依赖项设置为state.question_number，只有题号变化时才会重新发起请求，避免无效重复请求
• App组件顶层增加了判断逻辑，数据加载完成后再渲染Question组件，加载过程中可以显示加载状态提升体验

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