Я пытаюсь выяснить, как это работает.
У меня есть переменная 'pageCounter' для отслеживания текущей страницы (обновления после предыдущего / следующего нажатия кнопки), и при ее обновлении я хочу изменить заголовок дополнительных карт на данные новой страницы.
Когда я нажимаю следующую кнопку, она не рендерится, пока я не нажму ее дважды, а в журнале консоли не будет обновлено. Но когда я нажимаю кнопку «Журнал» после нажатия кнопки «Далее», она говорит, что она обновилась?
Я провел исследование и предположил, что это связано с асинхронной c природой функции 'setState'. Однако я не уверен, как это исправить?
Я пытался поместить функцию updateTitles в ловушку useEffect
, но получаю сообщение об ошибке, независимо от того, копирую ли я содержимое функции в нее или вызываю функцию внутри the hook.
Чего мне не хватает?
Ошибка при вводе содержимого updateTitles
в useEffect
:
Максимальное обновление Глубина превышена.
Вот код компонента: (здесь кодовая песочница)
import React from "react";
import "./styles.css";
import React, { useState, useEffect } from "react";
function Options() {
// Component States
const [pageCounter, setPage] = useState(1);
const [optionTitles, setOptionTitles] = useState({
Option1: "End of Lease Clean",
Option2: "Regular House Cleaning",
Option3: "Other Clean"
});
//Component Variables
const pageOneTitles = {
Option1: "End of Lease Clean",
Option2: "Regular House Cleaning",
Option3: "Other Clean"
};
const pageTwoTitles = {
Option1: "Blah1",
Option2: "Blah12",
Option3: "Blah13"
};
const pageThreeTitles = {
Option1: "MrMagoo",
Option2: "Nins",
Option3: "Pottao"
};
function updateTitles() {
switch (pageCounter) {
case 1:
setOptionTitles(pageOneTitles);
break;
case 2:
setOptionTitles(pageTwoTitles);
break;
case 3:
setOptionTitles(pageThreeTitles);
break;
default:
console.log("default");
break;
}
}
function nextPage() {
if (pageCounter < 3) {
setPage(pageCounter + 1);
updateTitles();
console.log(pageCounter);
}
}
function prevPage() {
if (pageCounter > 1) {
setPage(pageCounter - 1);
updateTitles();
console.log(pageCounter);
}
}
function printLog() {
console.log(pageCounter);
}
return (
<div id="options">
<button onClick={prevPage} id="next">
Back
</button>
<CardOption title={optionTitles.Option1} />
<CardOption title={optionTitles.Option2} />
<CardOption title={optionTitles.Option3} />
<p>{}</p>
<button onClick={nextPage} id="next">
Next
</button>
<button onClick={printLog} id="next">
log
</button>
</div>
);
}
function CardOption(props) {
return (
<div className="card">
<h2>{props.title}</h2>
</div>
);
}
export default Options;
Вот код, когда я пытаюсь использовать ловушку Вместо этого используйтеEffect, но я получаю сообщение об ошибке «Максимальная глубина обновления превышена».
import React, { useState, useEffect } from "react";
function Options() {
// Component States
const [pageCounter, setPage] = useState(1);
const [optionTitles, setOptionTitles] = useState({
Option1: "Page 1.11",
Option2: "Regular House Cleaning",
Option3: "Other Clean"
});
//Component Variables
const pageOneTitles = {
Option1: "Page 1.1",
Option2: "Regular House Cleaning",
Option3: "Other Clean"
};
const pageTwoTitles = {
Option1: "Page 2.1",
Option2: "Blah12",
Option3: "Blah13"
};
const pageThreeTitles = {
Option1: "Page 3.1",
Option2: "Nins",
Option3: "Pottao"
};
useEffect(() => {
switch (pageCounter) {
case 1:
setOptionTitles(pageOneTitles);
break;
case 2:
setOptionTitles(pageTwoTitles);
break;
case 3:
setOptionTitles(pageThreeTitles);
break;
default:
console.log("default");
break;
}
}, [pageCounter, pageOneTitles, pageTwoTitles, pageThreeTitles]);
function nextPage() {
if (pageCounter < 3) {
setPage(pageCounter + 1);
console.log(pageCounter);
}
}
function prevPage() {
if (pageCounter > 1) {
setPage(pageCounter - 1);
console.log(pageCounter);
}
}
function printLog() {
console.log(pageCounter);
}
return (
<div id="options">
<button onClick={prevPage} id="next">
Back
</button>
<CardOption title={optionTitles.Option1} />
<CardOption title={optionTitles.Option2} />
<CardOption title={optionTitles.Option3} />
<p>{pageCounter}</p>
<button onClick={nextPage} id="next">
Next
</button>
<button onClick={printLog} id="next">
log
</button>
</div>
);
}
function CardOption(props) {
return (
<div className="card">
<h2>{props.title}</h2>
</div>
);
}
export default Options;
Вот песочница с кодом для ловушки useEffect: https://codesandbox.io/s/thirsty-panini-mkdzh