javascript - 无法在顶层调用 React Hook “useState”。必须在 React 函数组件中调用 React Hooks

Question

进口feitas para rodar o codigo，

//aplicaçoes importadas...
import React, {useState} from 'react';

import ReactDOM from 'react-dom';
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
import './index.css';

//paginas importadas...
import Login from './pages/login/login';
import Register from './pages/register/register';
import Main from './pages/main/main'
import Showcase from './pages/showcase/showcase'
import reportWebVitals from './reportWebVitals';
import { isAuthenticated } from "./config/isautheticated";

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect to={{ pathname: "/login", state: { from: props.location } }} />
      )
    }
  />
);

questionas do código aqui, aqui gostaria de passar os estados como propriedados para o componente Main e um função de set para o componente login。

const [playload,setplayload]=useState();

ReactDOM.render(
<BrowserRouter>
  <Switch>
    <Route exact={true} path="/login"><Login ATT={setplayload()}/></Route>
    <Route exact={true} path="/register" component={Register}/>
    <Route exact={true} path="/showcase" component={Showcase}/>
    <PrivateRoute path="/main"><Main props={playload}/></PrivateRoute>
  </Switch>
</BrowserRouter>,document.getElementById('root')
);


reportWebVitals();

标签： javascriptreactjs

Answer 1

const [playload,setplayload]=useState();

此行不在反应函数组件内。

您应该将其移动到要保留此playLoad状态的现有组件，或者为将保持此状态的所有路由创建一个新的 Wrapper 组件，例如

    export default function App() {

     const [playload,setplayload] = useState();
    
      return (
         <BrowserRouter>
          <Switch>
            <Route exact={true} path="/login"><Login ATT={setplayload()}/></Route>
            <Route exact={true} path="/register" component={Register}/>
            <Route exact={true} path="/showcase" component={Showcase}/>
            <PrivateRoute path="/main"><Main props={playload}/></PrivateRoute>
          </Switch>
          </BrowserRouter>
      );
    }

和

ReactDOM.render(<App></App>, document.getElementById('root'));