reactjs - 为什么 this.state 在 messageParser 中显示为空

Question

我正在使用一个react-chatbot-kit模块，在console.log("calling getcong",getConfig())我可以看到数据设置为状态，但是当我尝试检查时在 messageParserconsole.log("state data", this.state)中显示为空。我不知道我在这里做错了什么请帮助我提前谢谢...

这是以下日志console.log("calling getcong",getConfig())：

这是console.log("state data", this.state)： 问题显示为空

import React, { useState, useEffect } from "react";
import Chatbot from "react-chatbot-kit";
import axios from 'axios';
import { createChatBotMessage } from "react-chatbot-kit";

import MessageParser from "./MessageParser";
import ActionProvider from "./ActionProvider";

function App() {
 const [getQuestion, setQuestion] = useState([]);

  useEffect(() => {
   axios
   .get("********************")
   .then(response => {
     setQuestion(response.data.question)
    })
   }
 ,[])
  
   const getConfig = () => {
     var state = {
      questions:getQuestion
     }
     return {
     initialMessages: [
      createChatBotMessage(
       `Hi I’m here to help you with self-assesment.`
      )]
     state: state,
    }
  }

console.log("calling getcong",getConfig())

return (
  <div className="App">
   <Chatbot
    config={getConfig()}    
    messageParser={MessageParser}
    actionProvider={ActionProvider}
    placeholderText="Customer Message Here"
   />
 </div>
 );
}

export default App;

消息解析器文件：

class MessageParser {
   constructor(actionProvider, state) {
    this.actionProvider = actionProvider;
    this.state = state
 }

parse = (message) => {
console.log('current message' + message);
console.log("state data", this.state);
}

export default MessageParser;

标签： reactjs

Answer 1

您的 MessageParser 类必须从 React.Component 扩展。只有这样你才能访问状态和渲染方法

class MessageParser extends React.Component {
   state = {}
   constructor(actionProvider, props) {
    this.actionProvider = actionProvider;
    super(props)
   }
   render(){return<></>}

   parse = (message) => {
   console.log('current message' + message);
   console.log("state data", this.state);
}

export default MessageParser;