基于按钮点击的动态页面变化 - React答案

【问题标题】：Dynamic page changing based on button click - React基于按钮点击的动态页面变化 - React
【发布时间】：2019-09-03 22:37:52
【问题描述】：

为了解决我的问题，我第一次构建了一个反应应用程序并遇到了一些问题。我有一个功能性反应组件，它两次调用并显示另一个功能性组件，由于 key 道具而略有不同。这两个组件是使用引导程序制作的注册和登录表单。我正在将数据从登录表单发送到 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。

【问题讨论】：

什么叫Home函数？如果这是一个功能组件，我认为它只有一个参数 - props。您的函数中有两个参数 - function Home(KeyID, setKey) { - KeyID 和 setKey。我认为，在这种情况下，第二个将永远是空的。第一个将是一个对象（道具对象）。
如果这些是传递给 Home 组件的道具的名称，则可能是忘记用 {} - function Home({KeyID, setKey}) { 包装参数的简单问题。
已更新，很抱歉造成混淆。
你试过改成function Home({KeyID, setKey}) {吗？
因为你将它作为一个名为 keyChanger 的道具发送。

标签： javascript reactjs components

【解决方案1】：

因为Home 是这样渲染的 -

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

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

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

相当于旧语法-

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

【讨论】：