时间戳

首页 > 解决方案 > 单击处理程序内部未定义 React Context 值

javascript - 单击处理程序内部未定义 React Context 值

问题描述

我有一个功能组件，我试图在其中使用上下文，我在导入期间获得了值，但是当我想在点击处理程序中使用它时，说它没有定义

组件.js

// I get these values over here
const [contextState, setContextState] = useContext(MyContext);
const clickHandler = (e) => {
    debugger; // when I am trying to log any of these values I get error of not defined
}

return (<button onClick={clickHandler}>Click me!</button>);

此外，我已经包装了我的app.js组件，如下所示

import { MyContextProvider } from './MyContext';
return (
    <Router>
        <MyContextProvider>
            <div className='App'>
                <Component />
            </div>
        </AuthContextProvider>
    </Router>
);

现在我的上下文文件myContext.js

import React, { useState, createContext } from 'react';

const MyContext = createContext([{}, () => {}]);

const MyContextProvider = (props) => {
    const [contextState, setContextState] = useState({
        userIsLoggedin: false,
        fName: '',
        lName: '',
        userName: ''
    });
    return (
        <myContext.Provider value={[contextState, setContextState]}>
            {props.children}
        </myContext.Provider>
    );
};

export { myContext, MyContextProvider };

标签： javascriptreactjsreact-context

解决方案

看起来您的上下文文件中有一些拼写错误。首先，MyContext在该文件中的任何地方使用（not myContext），其次，注意您在第一次调用时指定的变量名称useState，然后将相同的值传递给上下文（authStatevs contextState）：

import React, { useState, createContext } from "react";

const MyContext = createContext([{}, () => {}]);

const MyContextProvider = props => {
  const [authState, setAuthState] = useState({
    userIsLoggedin: false,
    fName: "",
    lName: "",
    userName: ""
  });
  return (
    <MyContext.Provider value={[authState, setAuthState]}>
      {props.children}
    </MyContext.Provider>
  );
};

export { MyContext as default, MyContextProvider };

这是您的设置的工作代码框

推荐阅读