web-dev-qa-db-ja.com

Reactコンテキストを使用します。'Object（...）（...） 'のプロパティ' currentChatbotInEdit 'は未定義のため、分解できません。どうすれば修正できますか？

編集中の現在のチャットボットにアクセスするために、チャットボットのコンテキストをインポートしようとしましたが、問題が発生しました。ここで問題になる可能性のあるアイデアはありますか？

どうもありがとうございます！

これがエラーメッセージです： enter image description here

ここに私の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);
reactjsreact-hooksreact-stateuse-context
1
Rainer Winkler

あなたはおそらくあなたのルートコンポーネントにコンテキストプロバイダーを提供しませんでした（あなたのケースでは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')
);
2
Israel Oladosu

同じ問題がありました。多分これはあなたを助けるでしょう。

私が持っていたContextFile内：

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

そして、私がコンテキストを消費していたファイルで、これを行いました：

import AuthContext from "./context/AuthContext";

したがって、「AuthContext」をインポートするのではなく、default「AuthContextProvider」をインポートしました。

この行に{}を入れてみてください：

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