Question

我有一个组件，该组件通过单击帐户验证电子邮件中的链接对我的服务器进行呼叫，从而呈现响应（已成功验证，已经验证并且此令牌已过期）注册后发送。

在非常罕见的情况下，UI会呈现，但内容却无法呈现，因此我正在阅读有关getStaticProps and getStaticPaths的Next文档，并认为预呈现是我所需要的\ 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调用做出反应（ha！）的钩子。我不确定如何连接getStaticProps来阅读文档，感觉就像您需要使用getStaticPaths一样...。

任何帮助将不胜感激！

我如何将axios调用用于getStaticPaths和getStaticProps

0 个答案: