时间戳

首页 > 解决方案 > 第一次取数据成功，第二次取数据不成功

reactjs - 第一次取数据成功，第二次取数据不成功

问题描述

我想用 useEffect 获取数据。使用第一个函数，我得到事件详细信息，使用第二个函数，我得到与事件相关的问题（按 ID）。获取事件数据成功，但第二次获取问题数据不成功（有时成功）。为什么一次取数据成功，第二次不成功？

控制台日志的输出：

Quiz.js:23 {active: true, _id: "6012eafe7813901034e77fb3", nameOfEvent: "Udalost 3", creatorId: "5fd23fb7b1a3a005cc82225d", participants: Array(0), …}

Quiz.js:45 {}

Quiz.js:23 {active: true, _id: "6012eafe7813901034e77fb3", nameOfEvent: "Udalost 3", creatorId: "5fd23fb7b1a3a005cc82225d", participants: Array(0), …}active: truecodeEvent: "udalost1"createdAt: "2021-01-28T16:49:02.374Z"creatorId: "5fd23fb7b1a3a005cc82225d"nameOfEvent: "Udalost 3"participants: []updatedAt: "2021-02-01T16:52:45.471Z"__v: 0_id: "6012eafe7813901034e77fb3"__proto__: Object

Quiz.js:45 {}

文件 Quiz.js

const Quiz = () => {
    const dataForQuiz = getUserDataToQuiz();
    const [eventValues, setEventValues] = useState({});
    const [questionBankOfEvent, setQuestionBankOfEvent] = useState({});

    const initDataToEvent = () => {
        getEventByEventCode(dataForQuiz.codeEvent).then(data => {
            if (!data.error) {
                setEventValues(data);
            }
            else {
                console.log(data.error);
            }
        })
    }

    console.log(eventValues);
    
    const initQuestionsForQuiz = () => {
        if (eventValues) {
            getQuestionsToEvent(eventValues._id).then((data) => {
                if (!data.error) {
                    setQuestionBankOfEvent(data);
                }
                else {
                    console.log(data.error);
                }
            })
        }
    }

    useEffect(() => {
        initDataToEvent();
        if(eventValues){
           initQuestionsForQuiz(); 
        }
    }, []);

    console.log(questionBankOfEvent);

    const formQuiz = () => {
        return(
            <>
                <h1>Quiz</h1>
            </>
        );
    }

    return (
        <>
            {formQuiz()}
        </>
        
    );
}

export default Quiz;

标签： reactjs

解决方案

在组件的第一次渲染中，您执行

initDataToEvent();
if(eventValues){
   initQuestionsForQuiz(); 
}

initDataToEvent应该更新 eventValues。所以你期望initQuestionsForQuiz被处决。
但是，到了if(eventValues)被评估的时候，setEventValues已经被解雇了，但是eventValues状态还没有被修改过。
因此，如果您将代码修改为：

useEffect(() => {
    initDataToEvent();
    console.log(eventValues);
    if(eventValues){
       initQuestionsForQuiz(); 
    }
}, []);

你会观察eventValues到是空的。

在 React 中，最好的做法是拆分事件和逻辑。在您的情况下，您希望initQuestionsForQuiz在eventValues已更新且不为空时运行。将您的代码修改为：

useEffect(() => {
    initDataToEvent();
}, []);

useEffect(() => {
    if(eventValues){
       initQuestionsForQuiz(); 
    }
}, [eventValues]);

应该让它工作。useEffect这段代码的作用是每次修改时都会运行作为参数提供给 seconde 的函数eventValues。

推荐阅读