Почему я не могу использовать перехватчики реакции в компонентах прямого маршрута, в другом месте я могу использовать перехватчики без проблем. Кто угодно может ответить на эту проблему, пожалуйста, и как я могу использовать хуки в этом компоненте

Вот ошибка

./src/Pages/bookingPage.js Строка 6:29: React Hook «useState» вызывается в функции «bookingPage», которая не является ни компонентом функции React, ни пользовательской функцией React Hook. response-hooks / rules-of-hooks

Поиск по ключевым словам, чтобы узнать больше о каждой ошибке.

Вот мой app.js

import React, { useState } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import AuthPage from './Pages/authPage'
import EventPage from './Pages/eventPage'
import BookingPage from './Pages/bookingPage';
import MainNavigator from './component/MainNavigator';
import AuthContext from './component/context/auth-context';

function App() {
  const [token, setToken] = useState(null);
  const [userId, setUserId] = useState(null);
  const login = (token, userId, expirationTime) => {
    setToken(token);
    setUserId(userId);
  }
  const logout = () => {
    setToken(null);
    setUserId(null);
  }
  return (
    <Router>
      <React.Fragment>
      <AuthContext.Provider value={{ token: token, userId: userId, login: login, logout: logout }}>
        <MainNavigator />
        <Switch>
          {!token && <Redirect from="/" to="/auth" exact />}
          {token && <Redirect from="/" to="/events" exact />}
          {token && <Redirect from="/auth" to="/events" exact />}
          {!token && <Route path="/auth" component={AuthPage} />}
          <Route path="/events" component={EventPage} />
          {token && <Route path="/bookings" component={BookingPage} />}
        </Switch>
      </AuthContext.Provider>
      </React.Fragment>
    </Router>
  );
}

export default App;

Вот мой компонент страницы бронирования

 import React, { useState } from 'react'
import { Grid, } from '@material-ui/core';

import '../App.css';
const bookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default bookingPage
0
Vishal Singh 3 Сен 2020 в 09:09

2 ответа

Лучший ответ

Имя компонента bookingPage должно начинаться с заглавной буквы.

import React, { useState } from 'react'
import { Grid, } from '@material-ui/core';

import '../App.css';
const BookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default BookingPage
0
Yves Kipondo 3 Сен 2020 в 06:24

Вызовите хуки из компонентов функции React.

Прочтите эти правила React-Hooks.

Измените название функции на BookingPage

const BookingPage = () => {
    const [book, setBook] = useState(false);
    return (
        <Grid container className='container_booking'>
            <Grid item lg={12} sm={12} xs={12}>
                <h1>bookibPage</h1>
                {book}
                <button onClick={() => setBook(true)}>click me</button>
            </Grid>
        </Grid>
    )
}

export default BookingPage

1
Ferin Patel 3 Сен 2020 в 06:24