Javascript 属性更新后更新用户上下文-AWS放大

我有一个要求，即第一次登录的用户在登录后需要同意弹出窗口。我在Cognito中创建了一个自定义属性，在用户单击“同意”按钮之前，该属性被标记为“是”。所有这些逻辑都是有效的，除了当你刷新页面时，用户会再次看到弹出窗口，尽管用户同意并且属性在Cognito中被更改

我正在使用带有useContext钩子的React上下文api。我在React工具中注意到上下文没有得到更新，这可能就是问题所在

AuthContext.js

import React from 'react';

export const AuthContext = React.createContext();

export const AuthProvider = AuthContext.Provider;

App.js

import React from 'react';
import { withRouter } from 'react-router-dom';
import Header from './components/Header';
import Routes from './Routes';
import useAmplifyAuth from './libs/useAmplifyAuth';
import { AuthProvider } from './context/AuthContext';
import InitialLoginModal from './components/InitialLoginModal';

function App() {
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return (
    <>
      <AuthProvider value={{ user, handleSignout }}>
        <>
          <Header />
          <Routes />
          <InitialLoginModal />
        </>
      </AuthProvider>
    </>
  );
}

export default withRouter(App);

最后，我只需要用户能够同意这些条款，更新他们的自定义属性，之后不再显示模式。任何帮助都将不胜感激。谢谢

• @vencovsky建议之后的新InitialLoginModal.js

import React，{useContext，useffect，useState}来自'React'；
从“react bootstrap”导入{Modal，Button，Image}；
从'aws amplify'导入{Auth}；
从“../img/logo.jpg”导入imgLogo；
从“../context/AuthContext”导入{AuthContext}；
const InitialLoginModal=（）=>{
常数{
用户，
handleSignout，
应该是,，
setShouldShowModal
}=使用上下文（AuthContext）；
const[showmodel，setshowmodel]=使用状态（shouldshowmodel）；
//const[initialLogin，setInitialLogin]=useState（“”）；
常量noAccept=（）=>{
设置显示模式（假）；
handleSignout（）；
};
useffect（（）=>{
如果（用户）{
if（user.attributes['custom:initiallogin']=='Yes'）{
设置显示模式（真）；
}
}
}，[用户，设置应显示模式]；
常量接受=（）=>{
updateInitialIn（）；
//setShouldShowModal（假）；
};
const updateinitialwin=async（）=>{
如果（用户）{
等待Auth.updateUserAttribute（用户，{'custom:initiallogin'：'No'}）；
设置显示模式（假）；
}
};
返回(
{/*初始登录模式*/}

信息在此

下一个
);
};
导出默认的InitialLoginModal；

不确定这是否正确，但您的上下文中应该有一个状态来决定它是否应该显示模态

function App() {
  const [shouldShowModal, setShouldShowModal] = useState(true) // you can choose if you want true or false
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return (
    <>
      <AuthProvider value={{ user, handleSignout, shouldShowModal, setShouldShowModal }}>
        <>
          <Header />
          <Routes />
          <InitialLoginModal />
        </>
      </AuthProvider>
    </>
  );
}

---

然后，您可以使用

setShouldShowModal

执行更多操作，因此，当您获得身份验证时，您可以选择是否显示该身份验证。

我自己也遇到了这个问题，我相信这是需要从以下方面进行更新的一行：

const data = await Auth.currentAuthenticatedUser();

致：

---

这将直接从Cognito检索更新的属性，这样当属性设置为custom:initiallogin='No'时，用户不会看到模式。

选择“oauth范围”下的“profile”在需要访问数据的应用程序客户端的cognito AWS界面中。

UseAmplifeAuth中的内容是什么？UseAmplifeAuth是用于放大身份验证的自定义挂钩。我将把它的代码添加到帖子中。谢谢@vencovsky。对于其他函数，我使用的是setShowModal还是setShouldShowModal？我尝试了这两种方法并将其混合使用，但没有找到一种方法使其工作。对于其他函数，您所说的

是什么意思？InitialLoginModal中更新模态状态的函数。您可以将
setshowldshowmodal
替换为
setshowldshowmodal
。只需在上下文中使用它，然后就可以挂载和卸载组件，状态仍然在那里。我在上面的代码中添加了我的新InitialLoginModal.js，因为它不适合这里。在刷新页面后，尽管进行了更改，但仍会显示模式。谢谢
import React, { useContext, useEffect, useState } from 'react';
import { Modal, Button, Image } from 'react-bootstrap';
import { Auth } from 'aws-amplify';
import imgLogo from '../img/logo.jpg';
import { AuthContext } from '../context/AuthContext';

const InitialLoginModal = () => {
  const {
    user,
    handleSignout,
    shouldShowModal,
    setShouldShowModal
  } = useContext(AuthContext);

  const [showModal, setShowModal] = useState(shouldShowModal);
  // const [initialLogin, setInitialLogin] = useState('');

  const noAccept = () => {
    setShowModal(false);
    handleSignout();
  };

  useEffect(() => {
    if (user) {
      if (user.attributes['custom:initiallogin'] === 'Yes') {
        setShowModal(true);
      }
    }
  }, [user, setShouldShowModal]);

  const accept = () => {
    updateInitialLogin();
    // setShouldShowModal(false);
  };

  const updateInitialLogin = async () => {
    if (user) {
      await Auth.updateUserAttributes(user, { 'custom:initiallogin': 'No' });
      setShowModal(false);
    }
  };

  return (
    <>
      {/* Initial login modal */}
      <Modal
        show={showModal}
        onHide={noAccept}
        dialogClassName="modal-70w modal-item"
        aria-labelledby="Initial Login Modal"
      >
        <Modal.Header closeButton>
          <Modal.Title>
            <Image
              src={imgLogo}
              alt="Logo"
              fluid
              className="modal-image-center"
            />
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <p>
            Info here
          </p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={accept}>Next</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
};

export default InitialLoginModal;


function App() {
  const [shouldShowModal, setShouldShowModal] = useState(true) // you can choose if you want true or false
  const {
    state: { user },
    handleSignout
  } = useAmplifyAuth();

  return (
    <>
      <AuthProvider value={{ user, handleSignout, shouldShowModal, setShouldShowModal }}>
        <>
          <Header />
          <Routes />
          <InitialLoginModal />
        </>
      </AuthProvider>
    </>
  );
}

const InitialLoginModal = () => {
  const { user, handleSignout, shouldShowModal, setShouldShowModal } = useContext(AuthContext);

  const [showModal, setShowModal] = useState(shouldShowModal );

  ...

}

const data = await Auth.currentAuthenticatedUser();

const data = await Auth.currentAuthenticatedUser({bypassCache: true});