React.js中onSubmit提交成功后刷新页面拉取最新数据库数据的问题

问题根因 #

• 方案1问题：updated 初始值为false，组件首次挂载触发useEffect执行GET请求，请求完成后调用setUpdated(true)修改了依赖项，导致useEffect二次触发，出现重复请求
• 方案2问题：普通变量不属于React响应式状态，修改后不会触发组件重渲染，useEffect无法感知到变量变化，不会重新执行

实现方案 #

首选方案：封装独立拉取函数，提交成功后直接调用 #

该方案逻辑更直观，没有多余的状态依赖，不会出现重复请求问题：

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

const Questionnaire = () => {
    const [questions, setQuestions] = useState({questions: []});

    // 封装数据拉取逻辑
    const fetchQuestions = async () => {
        const response = await axios.get('http://localhost:8000/questionnaire/');
        setQuestions({questions: response.data});
    }

    const onSubmit = async (answeredQuestions) => {
        const data = Object.values(answeredQuestions);
        // 提交完成后直接调用拉取方法获取最新数据
        await axios.put('http://localhost:8000/questionnaire/', data);
        fetchQuestions();
    };

    // 仅首次挂载时拉取初始数据
    useEffect(() => {
        fetchQuestions();
    }, []);

    return (
        <> 
            <Questions questions={questions} onSubmit={onSubmit} />
        </>
    );
}

export default Questionnaire;

备选方案：依赖触发器触发useEffect执行 #

如果需要保留依赖触发的逻辑，可以使用触发器状态，不要在useEffect内部修改触发器避免循环：

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

const Questionnaire = () => {
    const [questions, setQuestions] = useState({questions: []});
    // 仅作为刷新触发器，不参与业务逻辑判断
    const [refreshTrigger, setRefreshTrigger] = useState(false);

    const onSubmit = async (answeredQuestions) => {
        const data = Object.values(answeredQuestions);
        await axios.put('http://localhost:8000/questionnaire/', data);
        // 切换状态触发useEffect执行
        setRefreshTrigger(prev => !prev);
    };

    useEffect(() => {
        axios.get('http://localhost:8000/questionnaire/')
            .then((response) => {
                setQuestions({"questions": response.data});
            });
    }, [refreshTrigger]);

    return (
        <> 
            <Questions questions={questions} onSubmit={onSubmit} />
        </>
    );
}

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