0

我有一个组件通过单击我注册后发送的帐户验证电子邮件中的链接来调用我的服务器来呈现响应（已成功验证，已验证，并且此令牌已过期） 。

在极少数情况下，UI 会呈现，但它的内容不会，所以我正在阅读有关getStaticProps 和 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 调用做出反应（哈！）的钩子。我不知道如何连接getStaticProps阅读文档感觉就像你需要使用getStaticPaths它......

任何帮助，将不胜感激！

4

0 回答 0