Question

我是对 Context api 做出反应的新手。我正在尝试制作一个登录应用程序，我决定使用上下文 api 而不是钻孔道具。我在 context.js 中定义了我保持全局的值，并将它们发送到我想要使用的组件。它看起来像这样：

Context.js：

import React, { useEffect, useReducer, useState } from 'react'
const Context = React.createContext();


export const Provider = (props) => {

    const [isAuth, setIsAuth] = useState(false);

    useEffect(() => console.log(isAuth));
    const reducer = (state,action) => {
        
        if(action === 'authenticated'){
            return !state;
        }
        else if(action === 'not authenticated'){
            return state;
        }
        else{
            return state;
        }
    }    

    // const [state, dispatch] = useReducer(reducer, state);

    const [state, dispatch] = useReducer(reducer,{initialVal: isAuth});

    return (
        <Context.Provider value={{state, dispatch}}>
            {props.children}
        </Context.Provider>
    )
}

const Consumer = Context.Consumer;
export default Consumer;

PersonalSignIn.js：

import React, { useState } from 'react'
import { TabPane, Row, Col, Label, Input, Button } from 'reactstrap';
import { InputText } from 'primereact/inputtext';
import { Link } from 'react-router-dom';
import Consumer from '../../Context'

function PersonalSignIn({ signInCallBack }) {

    const [rememberMe, setRememberMe] = useState(false);
    const [email, setEmail] = useState();
    const [password, setPassword] = useState();

    const checkHandle = () => {
        setRememberMe(!rememberMe);
    }

    


    return (
        <Consumer>
            {
                value => {
                    console.log(value.dispatch);

                    const submitHandler = (event) => {
                        event.preventDefault();
                        console.log(email, " ", password, " ", rememberMe)
                
                        // const data = { "email": email, "password": password }
                        // fetch("http://localhost:3000/users", {
                
                        //     method: "POST",
                        //     headers: {
                        //         "Content-Type": "application/json",
                        //     },
                        //     body: JSON.stringify(data),
                        // })
                        //     .then((response) => response.json())
                        //     .then((response) => { console.log(response)});
                        // signInCallBack(true);
                        // value.dispatch('authanticated');
                    }
                    return (
                        <TabPane tabId="1">
                            <Row>
                                
                                <Col sm="12">
                                    <form onSubmit={submitHandler}>
                                        <div className="p-field p-fluid">
                                            <div className="p-col">
                                                <InputText placeHolder="E-posta" id="email" name="email" type="text"
                                                    onChange={e => setEmail(e.target.value)} />
                                            </div>
                                        </div>
                                        <div className="p-field p-fluid">
                                            <div className="p-col">
                                                <InputText placeHolder="Şifre" id="password" name="password" type="password"
                                                    onChange={e => setPassword(e.target.value)} />
                                            </div>
                                        </div>
                                        <div className="p-field p-fluid">
                                            <div className="p-col pl-5">
                                                <Label check>
                                                    <Input type="checkbox" value={rememberMe} onChange={checkHandle} />{' '}
                                                    Bilgilerimi Hatırla
                                                </Label>
                                            </div>
                                        </div>
                                        <div className="p-field p-fluid">
                                            <div className="p-col text-right">
                                                <Button type="submit">Giriş Yap</Button>
                                                {/* <Link to="/kullanici-sayfasi">Giriş Yap</Link> */}
                                            </div>
                                        </div>
                                    </form>
                                </Col>

                            </Row>
                        </TabPane>
                    )
                }
            }
        </Consumer>
    );
}

export default PersonalSignIn

在personalsignin.js文件中，我把context自带的value值打印到控制台，我留下输出：

当我提交表单时，我没有遇到任何错误或状态变化。我可以说他没有反应。我能做什么？

React 使用 useContext 和 useReducer 钩子问题

0 个答案: