Question

只是为了解决我的问题，我是第一次构建一个React应用程序并遇到一些问题。我有一个功能性的React组件，它会调用两次并显示另一个功能性组件，由于关键道具的缘故，它们之间存在细微的差异。这两个组件是使用引导程序创建的注册和登录表单。我正在将数据从登录表单发送到API。这部分代码正在运行。我的问题是提交后动态更改页面。我希望能够单击登录按钮并发送到新页面，而看不到登录和注册表格。我试图将一个函数传递给这些组件，这些组件将更改调用函数的状态，并在此基础上检查父函数显示的内容。显示我的尝试的代码在这里：这是我要更改的主要组件中的钩子。

 const [keyID, setKey] = useState(true);

[EDIT]在<Home KeyID={keyID} keyChanger={setKey} />这样的主要功能组件中调用此函数：

 function Home(KeyID, setKey) {
 if (KeyID) {
   return (
     <>
       <RegLogForm KeyID={1} setKey={setKey} />
       <RegLogForm KeyID={2} setKey={setKey} />
     </>
   );
 } else {
   return (
     <>
     <LoggedIn />
     </>
   )
 }
}

这在被调用的组件中：

<Form
  onSubmit={event => {
    event.preventDefault();
    let name2 = encodeURIComponent(name);
    ChangePage(APIHitter(props.UserID, name2, password));
    props.setKey(false);
  }}
>

我也尝试过将其传递给表单组件：

  const increment = () => {
    setKey(keyID => false);
  };

我很乐意被告知正确的方向。我得到的错误是props.setKey is not a function。

Answer 1

由于Home的呈现方式如下-

<Home KeyID={keyID} keyChanger={setKey} />

该函数应以这种方式接受带有命名道具的props参数-

function Home({KeyID, keyChanger: setKey}) {

与旧语法等效-

function Home(props) {
  var KeyID = props.KeyID;
  var setKey = props.keyChanger;

基于按钮单击的动态页面更改-React

1 个答案: