第一次取数成功，第二次取数不成功

Question

我想用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;

Answer 1

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

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]);

应该让它发挥作用。此代码的作用是，每次修改eventValues时，都会运行作为参数提供给第二个useEffect的函数。

Answer 2

可能是因为两者都在同一个useEffect中，因为react不会立即更新useState。我会把它们分为两种不同的用途效果，分别是：

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

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