0

Есть у меня главный компонент 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: '[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, через который я в свою очередь и собираюсь передавать объект с авторизированным пользователем прямиком в state App.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 я сначала проверяю формы, а потом уже пытаюсь готовый объект передать в state с помощью setActiveUser(obj)

Login.js

import React, {useState} from 'react';

import './Login.css';

function Login({users, setActiveUser}){        


            setStatus(<p className='succes'>Пользователь успешно авторизирован</p>);
            console.log(typeof(setActiveUser));
            setActiveUser({name: 'da'});
}

Большую часть кода вырезал ибо там идёт просто проверка форм, а это уже конечный результат у меня должен был быть, но что то пошло не так: Uncaught TypeError: setActiveUser is not a function. Проверил мой объект с пользователем на тип данных с помощью typeof, получился object

Начал проверять тип данных самой функций setActiveUser, получил object, проверил деструктуризацию,вроде всё в норме, попробовал в Auth.page при приёме аргументов тоже деструктуризировать setActiveUser из App.js и потом передать:

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

по итогу в Login.js через typeof(setActiveUser) вообще получаю indefined

Может кто подсказать где я намудрил? Вообще понять не могу в чём дело

1 ответ 1

0

Забыл деструктуризировать props в AuthPage.js

export default function AuthPage({ users, setActiveUser }){
    return (
        <div className='auth-block'>
            <Login users = {users} setActiveUser = {setActiveUser}/>
        </div>
    );
}
1
  • Ваш ответ можно улучшить с помощью дополнительной информации. Пожалуйста, нажмите править для добавления подробностей, например, цитат или документации, чтобы другие могли подтвердить правильность вашего ответа. Вы можете найти дополнительную информацию о том, как писать хорошие ответы в Справке. 13 июн 2022 в 20:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.