我的上下文抛出错误“对象（...）（...）”，因为它是空的

Question

嗨 大家，我在做登录注册系统，我使用上下文进行状态管理。我在这个系统中使用 cookie，我希望在 cookieContext 中使用这个 cookie 函数，我可以在 main 上合并之前运行，但我现在不能运行。我不明白一切看起来都很好，请帮助我，我会失去我的

我的上下文代码：

import { createContext } from 'react';
import cookie from 'js-cookie';

const CookieContext = createContext(null);

export const CookieProvider = ({ children }) => {

    const setUserCookie = (name, token) => {
        cookie.set(name, `Bearer ${token}`);
    };

    const isCookie = (name) => {
        const mycookie = cookie.get(name);
        if (!mycookie) return 0;
        return 1;
    };
    const values = {
        setUserCookie,
        isCookie,
    };

    return <CookieContext.Provider value={values}>{children}</CookieContext.Provider>;
};

export default CookieContext;

我在 index.js 上添加了元素，所以我的索引代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { CookieProvider } from './Contexts/CookieContext/cookieContext';
ReactDOM.render(
    <BrowserRouter>
        <React.StrictMode>
            <CookieProvider>
                <App />
            </CookieProvider>
        </React.StrictMode>
        <App />
    </BrowserRouter>,
    document.getElementById('root'),
);

我的主要组件应用：

import './App.css';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import HomePage from './Views/HomePage';
import Header from './Components/Header';
import Footer from './Components/Footer';
import BlogDetail from './Views/BlogDetailPage';
import Login from './Views/Login';
import Register from './Views/Register';
import { Switch, Route } from 'react-router-dom';
function App() {
    return (
        <>
            <Header />
            <Switch>
                <Route path="/" exact component={HomePage} />
                <Route path="/article/:id" exact component={BlogDetail} />
                <Route path="/login" component={Login} />
                <Route path="/register" component={Register} />
            </Switch>
            <Footer />
        </>
    );
}

export default App;

正如我在开始时所说的那样，我正在处理登录，注册页面登录和注册页面，如 View 组件，它们包含表单组件，因此此错误来自表单组件。注册或登录页面无法打开。

我的注册表单组件：

import { useState, useContext } from 'react';
import './styles.css';
import axios from 'axios';
import CookieContext from '../../../Contexts/CookieContext/cookieContext';
import { Redirect } from 'react-router-dom';

function RegisterForm() {

    const { setUserCookie, isCookie } = useContext(CookieContext);

    const [errorMessage, setErrorMessage] = useState('');

    const [userDataRegister, setUserDataRegister] = useState({
        name: '',
        surname: '',
        username: '',
        password: '',
        confirmPassword: '',
        phoneNumber: '',
        email: '',
        gender: '',
    });

    const [file, setFile] = useState();

    const result = isCookie('user');
    if (result === 1) {
        return <Redirect to="/" />;
    }

    // const url = `${process.env.REACT_APP_CLIENT_URL}/`
    const handleSubmit = async (e) => {
        setErrorMessage('');
        e.preventDefault();
        if (
            userDataRegister.name === '' ||
            userDataRegister.surname === '' ||
            userDataRegister.password === '' ||
            userDataRegister.confirmPassword === '' ||
            userDataRegister.phoneNumber === '' ||
            userDataRegister.email === '' ||
            userDataRegister.gender === ''
        ) {
            setErrorMessage('* ile  işaretli alanlar boş bırakılamaz');
        }

        const { name, surname, username, password, phoneNumber, email, gender } = userDataRegister;
        const data = new FormData();
        data.append('name', name);
        data.append('surname', surname);
        data.append('username', username);
        data.append('password', password);
        data.append('phoneNumber', phoneNumber);
        data.append('email', email);
        data.append('gender', gender);
        data.append('profilPicture', file);
        const config = {
            headers: { 'content-type': 'multipart/form-data' },
        };

        const response = await axios.post('posturl', data, config);
        if (response.data.code === 11000)
            setErrorMessage('Bu kullanıcı zaten mevcut,üyeyseniz lütfen giriş yapınız.');

        console.log(response);
        if (response.data.token) {
            setUserCookie('user', response.data.token);
            window.location.href = '/';
        }
    };

    const handleChange = (e) => {
        setUserDataRegister({ ...userDataRegister, ...{ [e.target.name]: e.target.value } });
    };
    const handleFile = (e) => {
        setUserDataRegister({ ...userDataRegister, ...{ [e.target.name]: e.target.files[0] } });
        setFile(e.target.files[0]);
    };

    return (
        <form className="w-100 p-4 border shadow" onSubmit={handleSubmit}>
            <div className="form-group">
                <label htmlFor="name">
                    Adınız <span className="text-danger">*</span>
                </label>
                <input name="name" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="surname">
                    Soyadınız <span className="text-danger">*</span>
                </label>
                <input name="surname" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="username">
                    Kullanıcı adınız <span className="text-danger">*</span>
                </label>
                <input name="username" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="password" className="form-control-label">
                    Şifreniz <span className="text-danger">*</span>
                </label>
                <input name="password" type="password" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="confirmPassword" className="form-control-label">
                    Tekrar Şifreniz <span className="text-danger">*</span>
                </label>
                <input
                    name="confirmPassword"
                    type="password"
                    className="form-control"
                    onChange={handleChange}
                />
            </div>
            <div className="form-group">
                <label htmlFor="phoneNumber" className="form-control-label">
                    Telefon Numaranız<span className="text-danger">*</span>
                </label>
                <input name="phoneNumber" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="email" className="form-control-label">
                    E-posta Adresiniz<span className="text-danger">*</span>
                </label>
                <input name="email" className="form-control" onChange={handleChange} />
            </div>
            <div className="form-group">
                <label htmlFor="gender" className="form-control-label">
                    Cinsiyet <span className="text-danger">*</span>{' '}
                </label>
                <select className="form-control" name="gender" onChange={handleChange}>
                    <option defaultValue="selected">Cinsiyet Seçiniz</option>
                    <option defaultValue="Woman">Kadın</option>
                    <option defaultValue="Man">Erkek</option>
                </select>
            </div>
            <div className="form-group">
                <label htmlFor="profilPicture" className="form-control-label">
                    Profil Fotoğrafı
                </label>
                <input
                    type="file"
                    name="profilPicture"
                    className="form-control-file"
                    id="profilPicture"
                    onChange={handleFile}
                />
            </div>
            <button type="submit" className="btn btn-block btnBg text-white my-2">
                Kayıt Ol
            </button>
            {errorMessage !== '' && <small className="text-danger lead">{errorMessage}</small>}
            <p className="text-danger lead" style={{ fontSize: '12px' }}>
                Error
            </p>
        </form>
    );
}

export default RegisterForm;

Answer 1

除了我认为您只需要提供更好的初始上下文值而不是 null 之外，我认为您的代码没有太多明显的错误。

const CookieContext = createContext({
  isCookie: false,
  setUserCookie: () => {},
});

Updating Context from a Nested Component

经常需要从一个组件更新上下文 嵌套在组件树深处的某个地方。在这种情况下，您可以 通过上下文向下传递函数以允许消费者更新 上下文：

theme-context.js

// Make sure the shape of the default value passed to
// createContext matches the shape that the consumers expect!
export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {},
});