时间戳

首页 > 解决方案 > 如何在 React 中将状态从组件传递到文件 app.js

javascript - 如何在 React 中将状态从组件传递到文件 app.js

问题描述

我必须将我的状态从 Authentication.js 传递给 App.js，以使注册用户可以使用某些功能。

这是我的文件 Authentication.js

import { useState } from "react"
import MyButton from "../componens/myButton"
import styles from "../style/authentication.module.css"
import Spinner from "../componens/Spinner"
import axios from "axios"

const Authentication = () =>{

const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const [loading, setLoading] = useState(false)
const [registration, setRegistration] = useState(true)
const [state, setState] = useState(null)

let MyRegistration = null;

const handleSubmit = async (e) =>{
    e.preventDefault()
    setLoading(true)
    try {
        const userKey = `AIzaSyCYe1XVuJVflRie0sf1y01RNrmQ77Dmp4Q`
        let urlAPI = `https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=${userKey}`
        if (!registration) {
            urlAPI = `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${userKey}`
        }
        setEmail(email);
        setPassword(password);
        MyRegistration = await axios.post(urlAPI,{
            email : email,
            password : password,
            returnSecureToken : true
        })
        setState(MyRegistration)
        setLoading(false);

        return MyRegistration

    } catch (error) {
        setLoading(false)
        console.log(error)
    }
}
    return <div className={styles.formContainer}>
        <h1>Authentication</h1>
        <form onSubmit={handleSubmit} action="">
            <p>Email</p>
            <input placeholder="Your email" type="email" value={email} onChange={handleEmail} />
            <p>Password</p>
            <input placeholder="Your Password" type="password" value={password} onChange={handlePassword} />
            {loading ? <Spinner/> :
            <MyButton  title={registration ? 'sign up' : 'Sign in'} handleClickButton={handleSubmit} />}
            <MyButton title={registration ? 'Go to Sign in' : 'Go to sign up'} handleClickButton={changeMode}/>
        </form>
    </div>
}
export default Authentication;

这是我的文件 App.js

import Home from './pages/Home';
import Book from './pages/Book'
import {Route, Switch} from 'react-router-dom'; 
import SavedBooks from './pages/SavedBooks';
import Header from './componens/Header';
import BookChapter from './pages/BookChapter';
import Authentication from './pages/Authentication';
import {useState} from "react";

function App(props) {

const [userData,  setUserData] = useState("");

  return (
    <div>
      <Header/>
      <Switch>
        <Route exact path="/" render={(props) => <Home userData={userData}/>}/>
        <Route exact path="/book/:id" component={Book}/>
        <Route exact path="/savedbooks" component={SavedBooks}/>
        <Route exact path="/book/:id/chapter/:numero" component={BookChapter}/>
        <Route exact path="/authentication" render={(props) => <Authentication setUserData={setUserData(this.state)}/> }/>
      </Switch>
    </div>
  )
}
export default App;

但回应是：TypeError: Cannot read properties of undefined (reading 'state')

标签： javascriptreactjs

解决方案

您不能将声明的状态传递Authentication.js给其父级App.js。因此，您需要在其中创建一个 useStateApp.js并将状态及其相应的 setterFunction 传递给孩子，即Authentication.js。这被称为提升国家。

移动const [state, setState] = useState(null)到App.js 并使用stateApp.js 中的变量并将其传递给子项，如下所示

<Route exact path="/authentication" render={(props) => <Authentication state={state} setState={setState}/> }/>

推荐阅读