Как использовать мой вызов 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 с этим....

Любая помощь будет оценена по достоинству!

0 ответов

Другие вопросы по тегам