javascript - 单击处理程序中未定义 react 上下文值

Question

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

component.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 };

Answer 1

看起来您的上下文文件中有一些拼写错误。首先，使用 MyContext该文件中的任何地方(不是 myContext )，其次，请注意您在第一次调用时指定的变量名称 useState然后将相同的值传递给上下文( authState 与 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 };

Here's a working codesandbox with your setup