可以从usestate到组件的通行证功能

Question

我有主要的app.js组件，我在其中制作了类似数据库的内容。我希望授权用户的对象在app.js内部，我创建了一个用户，我想在其中存储此用户。

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: '[email protected]',
        password: 'qwerty'
      },
      {
        name: 'Roma',
        email: '[email protected]',
        password: '123'
      },
      {
        name: 'Ilya',
        email: '[email protected]',
        password: 'zxc'
      }
    ]

  )

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

export default App;

为了将用户放在那里，我需要他首先登录，为此，我有authpage.js组件，其中login.js位于其中，依次我将通过授权的对象传递对象用户直接到州应用程序。 JS，为此，我将我的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>
    );
}

in 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'});
}

我删除大部分代码，因为它只是检查表单，这是我应该的最终结果，我 ，这是我应该的最终结果曾经有过，但是出现了问题：untuff typeError：setActiveuser不是函数。 使用用户检查我的对象的数据类型，使用typeof，结果对象

我开始检查setActiveuser函数本身的数据类型，got 对象，检查了破坏性，一切似乎是正常的，试图从auth.page接收参数时从app.js上破坏setructure setActiveuser，然后通过：结果：

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

结果，在login.js中通过typeof（setActiveuser）在login.js中，我通常会得到

没有人能告诉我我在哪里搞砸了？我真的不知道怎么了

Answer 1

您需要使用curly broke {}

当您使用＆lt; authpage用户= {users} setActiveUser = {setActiveUser}/＆gt;时， 道具。

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