单击处理程序内部未定义 React Context 值答案

【问题标题】：React Context value not defined inside click handler单击处理程序内部未定义 React Context 值
【发布时间】：2020-10-19 17:30:12
【问题描述】：

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

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

【问题讨论】：

能否修正拼写错误并提供component.js的完整代码？
修正了所有的错别字

标签： javascript reactjs react-context

【解决方案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

【讨论】：

嗯，这些错别字是无意的（替换原始变量名）。解决了问题中的那些问题，我的问题是在我使用 useContext() 时获得价值，而不是在点击处理程序中
@AbhishekDhanrajShahdeo 您能否在您的问题中也包含您的功能组件的完整文件？这将使重现和解决问题变得更加容易。

【解决方案2】：

所以，我一遍又一遍地调试，结果发现它没有在调试器中读取，而是在console.log() 中打印了值，并且直接在代码中使用它。

当前版本的 chrome 调试器似乎存在一些问题。

所以，遇到此问题的任何人请尝试使用该变量或在 chrome 上记录它

update ：它不会在调试器中打印，但它适用于日志。可能是预期的，但它有效

【讨论】：

【解决方案3】：

我想，你需要绑定事件监听器或者使用数组函数，

return (<button onClick={clickHandler.bind(this)}>Click me!</button>);
// Or,
return (<button onClick={ev => clickHandler(ev)}>Click me!</button>);

【讨论】：

该组件必须是功能组件，因为他使用的是useContext ==>根本没有这个。另外clickHandler是箭头函数，不需要绑定。
这是一个功能组件，没用这个