Как использовать мой вызов axios для getStaticPaths и getStaticProps
У меня есть компонент, который отображает ответ (успешно подтвержден, уже подтвержден, и срок действия этого токена истек) на вызов моего сервера при нажатии ссылки в электронном письме с подтверждением учетной записи, которое я отправил после регистрации.
В очень редких случаях пользовательский интерфейс будет отображаться, а контент для него - нет, поэтому я читал следующие документы, касающиеся getStaticProps и getStaticPaths, и решил, что предварительный рендеринг - это то, что мне нужно \ o /
Сейчас я использую useEffect
подключите компонент:
function isConfirmationForm() {
useEffect(() => {
axios
.get(`/users/confirmation/${match.params.token}`)
.then(response => {
if (response.status === 200) {
setError(false);
setResponseMessage(response.data.msg);
}
})
.catch(function(error) {
if (error.response.status === 404) {
resetUserAcoountVerified();
setResponseMessage(error.response.data.msg);
setError(true);
}
if (error.response.status === 400) {
userHasBeenVerified();
setResponseMessage(error.response.data.msg);
setError(true);
}
});
}, []);
const isNull = value => typeof value === 'object' && !value;
return (
<div className="login-form">
{error === false ? (
<Transition unmountOnHide={true} animation="scale" duration={duration}>
<Message success header={responseMessage[0]} />
</Transition>
) : (
''
)}
{accountNotVerified === false && error === true ? (
<Transition unmountOnHide={true} animation="scale" duration={duration}>
<Message error header={responseMessage[0]} />
</Transition>
) : (
''
)}
{isNull(accountNotVerified) && error === true ? (
<Transition unmountOnHide={true} animation="scale" duration={duration}>
<Message error header={responseMessage[0]} />
</Transition>
) : (
''
)}
</div>
);
}
Но сейчас я хочу заполнить этого плохого парня предварительно обработанными данными,
import ConfirmationPage from '../components/FormComponent/FormComponent.jsx';
import { withRouter } from 'react-router-dom';
const Confirmation = props => (
<>
<ConfirmationPage formType="Confirmation" {...props} />
</>
);
export async function getStaticPaths() {
return {
paths: [
{ params: { token: match.params.token } }
],
fallback: false
};
}
export async function getStaticProps({ params }) {
return { props: {.... } };
}
export default Confirmation;
Я застрял в том, как подойти к этому, потому что на уровне компонентов, как вы можете видеть, я создал несколько хуков, которые реагируют (ха!) На вызов axios. Я не знаю, как подключитьgetStaticProps
Читая документы, вы чувствуете, что вам нужно использовать getStaticPaths
с этим....
Любая помощь будет оценена по достоинству!