反应使用上下文。无法解构“对象（...）（...）”的属性“currentChatbotInEdit”，因为它未定义。我该如何解决？答案

【问题标题】：React Use Context. Cannot destructure property 'currentChatbotInEdit' of 'Object(...)(...)' as it is undefined. How can I fix that?反应使用上下文。无法解构“对象（...）（...）”的属性“currentChatbotInEdit”，因为它未定义。我该如何解决？
【发布时间】：2020-07-11 18:26:26
【问题描述】：

我尝试导入聊天机器人上下文以访问当前正在编辑的聊天机器人，但出现了问题。你有什么想法可能是这里的问题吗？

非常感谢！

这是错误信息：

这是我的 chatstate.js 的摘录：

    // import packages
    import React, { useReducer, useContext } from "react";
    import axios from "axios";

    // import local dependencies
    import AuthContext from "../../Context/Auth/authContext";
    import ChatbotContext from "../../Context/Chatbot/chatbotContext";
    import chatReducer from "./chatReducer";
    import ChatContext from "./chatContext";
    import { ADD_INPUT_TO_CHAT, SESSION_ID_CREATED } from "./chatTypes";

    const ChatState = props => {
      // get access to auth token
      const authContext = useContext(AuthContext);
      const { token } = authContext;

      // get access to current chatbot in edit
      const chatbotContext = useContext(ChatbotContext);
      const { currentChatbotInEdit } = chatbotContext;

这是我的 ChatbotState.js 的摘录：

// import packages
import React, { useReducer, useContext } from 'react';
import axios from 'axios';

// import local dependencies
import AuthContext from '../Auth/authContext';
import ChatbotContext from './chatbotContext';
import chatbotReducer from './chatbotReducer';
import {
  SUCCESSFUL_CHATBOT_FROM_USER_FETCH,
  NEW_QUIZBOT_CREATED
} from './chatbotTypes';

const ChatbotState = props => {
  // 1 - Get access to auth token
  const authContext = useContext(AuthContext);
  const { token } = authContext;

  // 2 - Create initial chatbot state
  const initialChatbotState = {
    userChatbots: [],
    currentChatbotInEdit: null
  };

  // 3 - Get access to the state object and the dispatch function
  const [state, dispatch] = useReducer(chatbotReducer, initialChatbotState);

【问题讨论】：

这是我的控制台告诉我的：ChatState.js:19 Uncaught TypeError: Cannot destruct property 'currentChatbotInEdit' of 'chatbotContext' 因为它未定义。在 ChatState (ChatState.js:19) 在 renderWithHooks (react-dom.development.js:14825) 在 mountIndeterminateComponent (react-dom.development.js:17505) 在 beginWork (react-dom.development.js:18629) 在 HTMLUnknownElement .callCallback (react-dom.development.js:188) 在 Object.invokeGuardedCallbackDev (react-dom.development.js:237) 在 invokeGuardedCallback (react-dom.development.js:292)

标签： reactjs react-hooks react-state use-context

【解决方案1】：

您可能没有为您的根组件提供上下文提供程序（如您的情况下的 AuthContextProvider，如果您有的话），我的意思是您的 app.js 或 index.js，具体取决于您打算服务的组件数量

假设你正在为所有组件提供服务，那么你可以使用你的 index.js，就像我下面的那样；

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import AuthContextProvider from './context/AuthContext';

ReactDOM.render(
  <React.StrictMode>
   <AuthContextProvider>
     <App />
   </AuthContextProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

【讨论】：

谢谢。这也解决了我的问题。太开心了！！
是的，在这个项目中的 6 个上下文之后，您认为我会记住这一点！谢谢！

【解决方案2】：

我有同样的问题。也许这会对你有所帮助。

在我的 ContextFile 中：

...
export const AuthContext = createContext();
...
export default AuthContextProvider;

在我使用上下文的文件中，我这样做了：

import AuthContext from "./context/AuthContext";

所以，我没有导入“AuthContext”，而是默认“AuthContextProvider”。

尝试将 {} 放在这一行：

import { ChatbotContext } from "../../Context/Chatbot/chatbotContext";

【讨论】：

这正是我的问题。始终确保您导出的是上下文而不是其提供者。在我的例子中，我的 Authcontext 文件是一个命名的导出 AuthContext 和一个默认的导出 AuthContextProvider。然后我需要在一个文件中的 AuthContext 但在没有 {} 的情况下导入它我有相同的错误，因为上下文被报告为未定义。如果没有 {}，它在逻辑上是我正在导入和重命名 AuthContext 的 AuthContextProvider

【解决方案3】：

我遇到了同样的问题。当我创建上下文时，我没有给出任何默认值，这不是必须的，但这就是造成问题的原因。如果我通过 null 或 undefined 问题仍然存在。

解决方法是传递一个空值，如下所示：

const MyContext = createContext("");

【讨论】：

【解决方案4】：

我遇到了同样的问题，我在 index.js 级别导入提供程序解决了它

ReactDOM.render(
  <React.StrictMode>
    <AppContextProvider providerInitState={movie}>
      <App />
    </AppContextProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

【讨论】：