无法将函数从 useState 传递到组件

Question

我有主要的 App.js 组件，我在其中制作了类似数据库的东西。我希望授权用户的对象位于 App.js 中，我创建了一个 useState 来存储该用户。

import React, {useState} from 'react';

import './App.css';
import AuthPage from './components/AuthPage/AuthPage';

function App() {
  const [activeUser, setActiveUser] = useState();  
  const [users, setUsers] = useState(
    [
      {
        name: 'Andrey',
        email: 'qwerty@mail.ru',
        password: 'qwerty'
      },
      {
        name: 'Roma',
        email: 'ramenCisco@mail.ru',
        password: '123'
      },
      {
        name: 'Ilya',
        email: 'ilyazxc@mail.ru',
        password: 'zxc'
      }
    ]

  )

  return (
    <>
      <AuthPage users = {users} setActiveUser = {setActiveUser}/>
    </>
  );
}

export default App;

为了将用户放在那里，我需要他首先登录，为此我有 AuthPage.js 组件，Login.js 位于其中，反过来，我将通过该组件传递具有授权的对象用户直接访问状态应用程序。为此，我使用 props 将 setActiveUser 函数从 App.js 首先传递到 AuthPage.js，然后从 AuthPage.js 传递到 Login.js

AuthPage.js

import React from 'react';
import Login from './Login';

import './AuthPage.css'

export default function AuthPage(users, setActiveUser){
    return (
        <div className='auth-block'>
            <Login users = {users} setActiveUser = {setActiveUser}/>
        </div>
    );
}

在 Login.js 中，我首先检查表单，然后尝试使用 setActiveUser(obj) 将完成的对象传输到状态

Login.js

import React, {useState} from 'react';

import './Login.css';

function Login({users, setActiveUser}){        


            console.log(typeof(setActiveUser));
            setActiveUser({name: 'da'});
}

我删掉了大部分代码，因为它只是检查表单，这是我应该得到的最终结果，但是出了问题：Uncaught TypeError: setActiveUser is not a function。使用 typeof 与用户检查我的对象的数据类型，结果是object

我开始检查 setActiveUser 函数本身的数据类型，得到object，检查解构，一切似乎都很正常，尝试在Auth.page接收参数时从 App.js 解构 setActiveUser 然后传递：

export default function AuthPage(users, {setActiveUser}){}

结果，在 Login.js 中通过 typeof (setActiveUser) 我通常得到indefined

谁能告诉我我哪里搞砸了？我真的不知道出了什么问题

Answer 1

您需要使用大括号{}

当您使用 时 <AuthPage users = {users} setActiveUser = {setActiveUser}/>，users 和 setActiveUser 将作为 props 传递给 AuthPage。

export default function AuthPage({ users, setActiveUser }){
    return (
        <div className='auth-block'>
            <Login users = {users} setActiveUser = {setActiveUser}/>
        </div>
    );
}